鼠标悬停时的谷歌地图 v3 标记信息窗口

Posted 2023-02-22

【中文标题】鼠标悬停时的谷歌地图 v3 标记信息窗口

【英文标题】：google maps v3 marker info window on mouseover

【发布时间】：2012-02-13 19:09:32

【问题描述】：

我已经搜索了 *** 和其他论坛，包括谷歌地图 v3 api 文档以获得答案，但我找不到如何将触发标记信息窗口的事件从 click 更改为 mouseover 在我正在使用的文件中。

我正在使用来自 google 库的演示，其中包含一个融合表层。

您放大集群并看到位置的红色小圆圈标记。 您必须单击以显示信息窗口。我希望滚动鼠标以显示信息窗口。

我的演示在这里： http://www.pretravelvideo.com/gmap2/

functions.js 文件在这里完成了大部分工作： http://www.pretravelvideo.com/gmap2/functions.js

【问题讨论】：

您要查找的事件是鼠标悬停，这对您不起作用吗？

我什至没有看到点击红色标记时出现的信息窗口

【参考方案1】：

这是一个例子： http://duncan99.wordpress.com/2011/10/08/google-maps-api-infowindows/

marker.addListener('mouseover', function() 
    infowindow.open(map, this);
);

// assuming you also want to hide the infowindow when user mouses-out
marker.addListener('mouseout', function() 
    infowindow.close();
);

【讨论】：

如果我想从 Infowindow 复制一些文本怎么办？只要我将鼠标悬停在标记或信息窗口本身上，我就希望信息窗口保持打开状态...所以标记上的 mouseout 侦听器不会这样做:(

@Kedor 将 mouseout 事件侦听器更改为在信息窗口而不是标记上。

这对我有用，但它背后的工作原理是什么？即使我将它放在 for 循环中，“this”如何获得标记的引用？

@lostchild 好问题。我的理解是 this 是对事件侦听器附加到的任何对象的引用，即在这种情况下它是 marker 的简写。在这个例子中使用this 代替marker 并没有真正的优势。但是，如果您有一个可以附加到各种对象的事件侦听器函数（例如，如果我们在这里使用相同的函数将鼠标悬停在折线上），那么引用 marker 和不太具体的this 会更有意义。

【参考方案2】：

var icon1 = "imageA.png";
var icon2 = "imageB.png";

var marker = new google.maps.Marker(
    position: myLatLng,
    map: map,
    icon: icon1,
    title: "some marker"
);

google.maps.event.addListener(marker, 'mouseover', function() 
    marker.setIcon(icon2);
);
google.maps.event.addListener(marker, 'mouseout', function() 
    marker.setIcon(icon1);
);

【参考方案3】：

感谢邓肯的回答，我最终得到了这个：

marker.addListener('mouseover', () => infoWindow.open(map, marker))
marker.addListener('mouseout', () => infoWindow.close())