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

最新推荐文章于 2024-01-16 09:29:42 发布

weixin_34004750

最新推荐文章于 2024-01-16 09:29:42 发布

阅读量256

点赞数

原文链接：https://my.oschina.net/qii/blog/482666

版权

为什么80%的码农都做不了架构师？>>>

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