【问题标题】:google maps v3 marker info window on mouseover鼠标悬停时的谷歌地图 v3 标记信息窗口
【发布时间】:2012-02-13 19:09:32
【问题描述】:

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

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

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

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

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

【问题讨论】:

  • 您要查找的事件是鼠标悬停,这对您不起作用吗?
  • 我什至没有看到点击红色标记时出现的信息窗口

标签: google-maps google-maps-api-3 google-maps-markers mouseover google-fusion-tables


【解决方案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())
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2012-01-02
      • 1970-01-01
      • 1970-01-01
      • 2011-02-09
      • 2011-08-21
      • 1970-01-01
      • 2013-05-18
      • 1970-01-01
      相关资源
      最近更新 更多