谷歌地图v3折线工具提示

Question

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

折线上没有title属性(google.maps.Polyline).有没有办法可以做到这一点/在V3中模拟这个？我可以在V2中做到这一点,我找不到V3的例子.

Answer 1

我将@ samshull上面的答案(正式upvoted!)与来自此处的信息结合起来,使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.setContent()需要一个字符串.因此toString(),如果要在InfoWindow中显示数字,请调用数字变量.

我认为所有这些都是一个不完美的解决方法,直到谷歌地图有希望有一天title向PolylineOptions添加一个属性,就像他们已经为MarkerOptions所做的那样.

Answer 2

我不是100%这是唯一的方式,或者最好的方式,但它是一种在Polyline上创建窗口的方法

在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

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