Javascript 谷歌地图 v3 折线工具提示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5112867/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google maps v3 polyline tooltip
提问by ScottE
A google maps marker object (google.maps.Marker) has a title property, so when a user moves their mouse over the marker a simple tooltip is displayed.
谷歌地图标记对象 (google.maps.Marker) 具有标题属性，因此当用户将鼠标移到标记上时，会显示一个简单的工具提示。
There isn't a title property on a polyline (google.maps.Polyline). Is there a way I can do this / simulate this in V3? I could do this in V2, and I can't find an example for V3.
折线 (google.maps.Polyline) 上没有标题属性。有没有办法在 V3 中做到这一点/模拟这一点？我可以在 V2 中执行此操作，但找不到 V3 的示例。
采纳答案by Argiropoulos Stavros
If i'm not mistaken i don't think it is possible to set the tooltip since as you mentioned there is not a title property in PolygonOptions object.But you can make a divthat looks exactly the same as the tooltip and place it let's say in the tip of your mouse during the mousemove event.I tried also to find a solution to place this tooltip somewhere in the center of the polygon but i think it is too much of a trouble that's why i also think the google guys didn't implement it also. Cheers
如果我没记错的话，我认为不可能设置工具提示，因为正如您所提到的，PolygonOptions 对象中没有 title 属性。但是您可以制作一个与工具提示完全相同的div并放置它，让我们在mousemove 事件期间在鼠标尖端说。我还尝试找到一个解决方案，将此工具提示放置在多边形中心的某个位置，但我认为这太麻烦了，这就是为什么我也认为谷歌人没有t 也实施它。干杯
回答by snark
I combined @samshull's answer above (duly upvoted!) with info from hereto make the InfoWindowappear where the user's cursor mouses over the line:
我将上面@samshull 的回答（正式投票！）与这里的信息结合起来，使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();
});
Here, lineis your PolyLineobject; mapis your Mapobject; and infoWindowis your InfoWindow object, which I just create with:
在这里，line是您的PolyLine对象；map是你的Map对象；并infoWindow为您的信息窗口对象，我只是创建：
var infoWindow = new google.maps.InfoWindow();
I also follow this adviceby re-using the same InfoWindow object for all my polylines rather than creating a new one for each line:
我也遵循这个建议，为我的所有多段线重新使用相同的 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 对象，并根据地图事件（例如用户点击）在不同位置或标记处打开它。如果确实需要多个信息窗口，则可以同时显示多个 InfoWindow 对象。
Note that infoWindow.setContent()takes a string. So call toString()on a number variable if you want to display a number in the InfoWindow.
请注意，它infoWindow.setContent()需要一个字符串。因此toString()，如果您想在信息窗口中显示数字，请调用数字变量。
I view all of this as an imperfect workaround until Google Maps hopefully one day add a titleproperty to PolylineOptions, just like they've already done for MarkerOptions.
我认为所有这些都是一种不完美的解决方法，直到谷歌地图希望有一天title向PolylineOptions添加一个属性，就像他们已经为MarkerOptions所做的那样。
回答by samshull
I am not 100% this is the only way, or the best way, but it is away to create a window over your Polyline
我不是 100% 这是唯一的方法，或者最好的方法，但它是一种在多段线上创建窗口的方法
In Google maps V3, you should to create an InfoWindowthen set the content using myInfoWindow.setContent("Hello World!")
在谷歌地图 V3 中，您应该创建一个信息窗口，然后使用myInfoWindow.setContent("Hello World!")
In order to make it show on mouseover, you will need to do something like:
为了让它在鼠标悬停时显示，您需要执行以下操作：
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();
});
回答by brims
I found this online that helped me do tooltips on polygons, from http://philmap.000space.com/gmap-api/poly-hov.html:
我从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);
}
};
}();
Also, Please see this SO discussion about the same topic: Tooltip over a Polygon in Google MapsAnd, Google maps rectangle/polygon with title
另外，请参阅关于同一主题的 SO 讨论： Google Maps 中多边形上的工具提示以及， Google 地图矩形/多边形与标题
