博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
在谷歌地图上显示地名等信息,类似infowindow
阅读量:6827 次
发布时间:2019-06-26

本文共 2107 字,大约阅读时间需要 7 分钟。

  hot3.png

function Tooltip(options) {     this.marker_ = options.marker;    this.content_ = options.content;    this.map_ = options.marker.get('map');    this.cssClass_ = options.cssClass || null;     this.is_hidden = options.is_hidden === undefined ? !0 : options.is_hidden;     this.div_ = null;     this.setMap(this.map_);    var me = this;     if(this.is_hidden){        google.maps.event.addDomListener(me.marker_, 'mouseover', function(){            me.show();        });        google.maps.event.addDomListener(me.marker_, 'mouseout', function(){            me.hide();        });    }} Tooltip.prototype = new google.maps.OverlayView(); Tooltip.prototype.onAdd = function() {     var div = document.createElement('DIV');    div.style.position = "absolute";     div.style.visibility = "visible";     if(this.is_hidden)         div.style.visibility = "hidden";    else         div.style.visibility = "visible";     div.innerHTML = this.content_;     this.div_ = div;     var panes = this.getPanes();    panes.floatPane.appendChild(this.div_);    var me = this;     google.maps.event.addDomListener(this.div_, 'click', function(){         if(me.map_.getZoom() < 18){            me.map_.setZoom(me.map_.getZoom() + 1);            me.map_.setCenter(me.marker_.getPosition());         }    });} Tooltip.prototype.draw = function() {     var overlayProjection = this.getProjection();     var ne = overlayProjection.fromLatLngToDivPixel(this.marker_.getPosition());    var div = this.div_;    div.style.left = ne.x + 'px';    div.style.top = ne.y + 'px';} Tooltip.prototype.onRemove = function() {    this.div_.parentNode.removeChild(this.div_);} Tooltip.prototype.hide = function() {    if (this.div_) {        this.div_.style.visibility = "hidden";    }}Tooltip.prototype.show = function() {    if (this.div_) {        this.div_.style.visibility = "visible";    }}

开始在marker上,显示的提示信息,使用的是infowindow,但是infowindow太丑了,而且位置总是在上面,于是就找到了这段代码。

这是一段别人写的代码,我改了两个地方。

1。不是所有的提示信息都是隐藏的,有一部分是一直显示的,比如重点的车站,城市,部分是鼠标放上去显示。

2.单击某个点的时候,放大地图,并且将该点置于地图中心。

content里可以传入html代码,cssClass里,可以设置样式。

转载于:https://my.oschina.net/qii/blog/482666

你可能感兴趣的文章
获取物理路径相关
查看>>
用 Flask 来写个轻博客 (2) — Hello World!
查看>>
(2/24) 快速上手一个webpack的demo
查看>>
不高兴的o( ̄ヘ ̄o#)JJ
查看>>
ruby 镜像安装
查看>>
实验课2
查看>>
Poj 3683 Priest John's Busiest Day(2-SAT)
查看>>
BZOJ4555: [Tjoi2016&Heoi2016]求和
查看>>
STL源码分析与实现-stl_list容器
查看>>
volume不能挂载mysql permission denied问题
查看>>
Delphi中WebService服务
查看>>
Linux下的两种磁盘分区工具的使用
查看>>
HDU 2157 - How many ways??
查看>>
Spark性能优化:资源调优篇(转)
查看>>
【BZOJ】3238: [Ahoi2013]差异
查看>>
dubbo与zookeeper的关系
查看>>
tp框架之对列表的一系列操作及跳转页面(详细步骤)
查看>>
数据库编程:检测TabName 数据表是否存在
查看>>
使用string.Format需要注意的一个性能问题
查看>>
手把手教小白安装Erlang
查看>>