Javascript 谷歌地图v3多段线工具提示

GoogleMaps标记对象（google.maps.marker）具有title属性，因此当用户将鼠标移动到标记上时，将显示一个简单的工具提示

---

多段线上没有标题属性（google.maps.polyline）。有没有一种方法可以在V3中进行此操作/模拟？我可以在V2中这样做，但我找不到V3的示例。

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

在Google maps V3中，您应该创建一个新的应用程序，然后使用

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();
});

---

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

---

干杯

我在网上找到了这个帮助我做多边形工具提示的东西， 发件人：

var tooltip=function（）{
变量id='tt'；
var-top=3；
左var=3；
var-maxw=200；
无功转速=10；
无功定时器=20；
var endalpha=95；
varα=0；
变量tt，t，c，b，h；
var ie=document.all？true：false；
返回{
show：函数（v，w）{
如果（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.儿童（c）；
tt.儿童（b）；
文件.正文.附件（tt）；
tt.style.opacity=0；
tt.style.filter='alpha（不透明度=0'）；
document.onmousemove=this.pos；
}
tt.style.visibility='visible'；
tt.style.display='block'；
c、 innerHTML=v；
tt.style.width=w？w+'px'：'auto'；
如果（！w&&ie）{
t、 style.display='none'；
b、 style.display='none'；
tt.style.width=tt.offsetWidth；
t、 style.display='block'；
b、 style.display='block'；
}
如果（tt.offsetWidth>maxw）{tt.style.width=maxw+'px'}
h=parseInt（tt.offsetHeight）+顶部；
清除间隔（tt定时器）；
tt.timer=setInterval（函数（）{tooltip.fade（1）}，计时器）；
},
位置：功能（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+左）+'px'；
},
淡入淡出：功能（d）{
var a=α；
如果（（a！=endalpha&&d==1）| |（a！=0&&d==1））{
var i=速度；
如果（endalpha-a

另外，请参见关于同一主题的SO讨论： 以及，

---

我将上面@samshull的答案（适当地向上投票！）与来自的信息相结合，以使用户的光标移动到行上时出现：

// 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

是您的对象<代码>地图是您的对象；而

infoWindow

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

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

接下来，我还将对所有多段线重新使用相同的InfoWindow对象，而不是为每条线创建一个新对象：

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

请注意，

infoWindow.setContent（）

接受一个字符串。因此，如果要在信息窗口中显示数字，请对数字变量调用

toString（）

---

我认为这一切都是一个不完美的解决办法，直到有一天Google Maps希望能添加一个

title

属性，就像他们已经做的那样。

我已经在使用一个信息窗口来获取全部细节，所以这不起作用。但是如何在多段线上定位信息窗口？@Naman:有关如何捕获光标位置的详细信息，请参阅下面的答案。工具提示在全屏模式下不起作用。有没有解决办法。

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