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

纵饮孤独 提交于 2020-04-21 06:47:33
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里,可以设置样式。

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!