Google 地图 v3 折线工具提示

Question

谷歌地图标记对象 (google.maps.Marker) 有一个 title 属性，因此当用户将鼠标移到标记上时，会显示一个简单的工具提示。

折线 (google.maps.Polyline) 上没有标题属性。有没有办法可以在 V3 中做到这一点/模拟这一点？ 我可以在 V2 中做到这一点，但我找不到 V3 的示例。

Answer 1

我将 samshull 的答案与来自 Google 的 信息结合起来，使 InfoWindow 出现在用户光标悬停在该行上的位置：

// Open the InfoWindow on mouseover:
google.maps.event.addListener(line, 'mouseover', function(e) {
   infoWindow.setPosition(e.latLng);
   infoWindow.setContent("You are at " + e.latLng);
   infoWindow.open(map);
});

// Close the InfoWindow on mouseout:
google.maps.event.addListener(line, 'mouseout', function() {
   infoWindow.close();
});

这里，

line

是你的PolyLine对象；

map

是您的 Map 对象；

infoWindow

是您的 InfoWindow 对象，我刚刚使用它创建：

var infoWindow = new google.maps.InfoWindow();

我还遵循 这个建议，为所有折线重新使用相同的 InfoWindow 对象，而不是为每一行创建一个新对象：

最佳实践：为了获得最佳用户体验，只有一个信息窗口 应该随时在地图上打开。多个信息窗口使 地图显得杂乱。如果您一次只需要一个信息窗口， 您可以只创建一个 InfoWindow 对象并在不同的位置打开它 地图事件（例如用户点击）上的位置或标记。如果你这样做 需要多个InfoWindow，可以显示多个InfoWindow 同时对象。

请注意，

infoWindow.setContent()

采用字符串。因此，如果您想在信息窗口中显示数字，请对数字变量调用

toString()

。

我认为所有这些都是一个不完美的解决方法，直到有一天 Google 地图希望向

PolylineOptions

添加 title 属性，就像他们已经为 MarkerOptions 所做的那样。

Answer 2

我不是100%这是唯一的方法，或者最好的方法，但它是a在折线上创建窗口的方法

在 Google 地图 V3 中，您应该创建一个 InfoWindow，然后使用

myInfoWindow.setContent("Hello World!")

设置内容

为了使其在鼠标悬停时显示，您需要执行以下操作：

google.maps.event.addListener(myPolyline, 'mouseover', function() {
    myInfoWindow.open(mymap);
    // mymap represents the map you created using google.maps.Map
});

// assuming you want the InfoWindow to close on mouseout
google.maps.event.addListener(myPolyline, 'mouseout', function() {
    myInfoWindow.close();
});

Answer 3

我在网上发现这个可以帮助我在多边形上做工具提示， 来自 http://philmap.000space.com/gmap-api/poly-hov.html：

var tooltip=function(){
var id = 'tt';
var top = 3;
var left = 3;
var maxw = 200;
var speed = 10;
var timer = 20;
var endalpha = 95;
var alpha = 0;
var tt,t,c,b,h;
var ie = document.all ? true : false;
return{
    show:function(v,w){         
        if(tt == null){             
            tt = document.createElement('div');
            tt.setAttribute('id',id);
            t = document.createElement('div');
            t.setAttribute('id',id + 'top');
            c = document.createElement('div');
            c.setAttribute('id',id + 'cont');
            b = document.createElement('div');
            b.setAttribute('id',id + 'bot');
            tt.appendChild(t);
            tt.appendChild(c);
            tt.appendChild(b);
            document.body.appendChild(tt);              
            tt.style.opacity = 0;
            tt.style.filter = 'alpha(opacity=0)';
            document.onmousemove = this.pos;                
        }
        tt.style.visibility = 'visible';
        tt.style.display = 'block';
        c.innerHTML = v;
        tt.style.width = w ? w + 'px' : 'auto';
        if(!w && ie){
            t.style.display = 'none';
            b.style.display = 'none';
            tt.style.width = tt.offsetWidth;
            t.style.display = 'block';
            b.style.display = 'block';
        }
        if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'}
        h = parseInt(tt.offsetHeight) + top;
        clearInterval(tt.timer);
        tt.timer = setInterval(function(){tooltip.fade(1)},timer);
    },
    pos:function(e){
        var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
        var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
        tt.style.top = (u - h) + 'px';
        tt.style.left = (l + left) + 'px';
    },
    fade:function(d){
        var a = alpha;
        if((a != endalpha && d == 1) || (a != 0 && d == -1)){
            var i = speed;
            if(endalpha - a < speed && d == 1){
                i = endalpha - a;
            }else if(alpha < speed && d == -1){
                i = a;
            }
            alpha = a + (i * d);
            tt.style.opacity = alpha * .01;
            tt.style.filter = 'alpha(opacity=' + alpha + ')';
        }else{
            clearInterval(tt.timer);
            if(d == -1){tt.style.display = 'none'}
        }
    },
    hide:function(){
        clearInterval(tt.timer);
        tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
    }
};
}();

另外，请参阅有关同一主题的 SO 讨论： Google 地图中多边形上的工具提示 和， 谷歌地图带有标题的矩形/多边形

Answer 4

如果我没有记错的话，我认为不可能设置工具提示，因为正如您提到的，PolygonOptions 对象中没有 title 属性。但是您可以制作一个看起来与工具提示完全相同的 div 并且将其放置在鼠标的尖端在鼠标移动事件期间。我还尝试找到一种解决方案来将此工具提示放置在多边形中心的某个位置，但我认为这太麻烦了，这就是为什么我也认为谷歌的人也没有实现它。 干杯