当前位置:首页 > Windows程序 > 正文

在谷歌地图上显示地名等信息,类似infowindow

2021-03-29 Windows程序

标签:

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里,可以设置样式。

在谷歌地图上显示地名等信息,类似infowindow

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/69408.html