javascript - Google map v3 折线工具提示

Question

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

多段线 (google.maps.Polyline) 上没有标题属性。有什么办法可以在 V3 中做到这一点/模拟这一点吗？ 我可以在 V2 中执行此操作，但我找不到 V3 的示例。

Answer 1

我将上面@samshull 的回答(正式投票!)与来自 here 的信息相结合制作 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();

我也关注this advice通过为我的所有折线重新使用相同的 InfoWindow 对象，而不是为每条线创建一个新对象:

Best practices: For the best user experience, only one info window should be open on the map at any one time. Multiple info windows make the map appear cluttered. If you only need one info window at a time, you can create just one InfoWindow object and open it at different locations or markers upon map events, such as user clicks. If you do need more than one info window, you can display multiple InfoWindow objects at the same time.

请注意，infoWindow.setContent() 接受一个字符串。因此，如果您想在信息窗口中显示数字，请对数字变量调用 toString()。

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