在样式化地图图标和标注上添加点击事件监听器

Question

是否可以为样式化地图上显示的图标和/或标签添加单击事件监听器？我有一个表单允许录入兴趣点。由于兴趣点样式显示了许多潜在候选项的图标和/或标签，如果用户单击其中一个图标或标签，则会打开一个包含地址信息等内容的信息窗口，我希望在用户单击其中一个图标或标签时将这些地址信息捕获到我的表单字段中。

- user3258359

---

可能是自定义Google Maps API v3中默认InfoWindow的重复问题。 - Dr.Molle

Answer 1

没有基于API的POI访问方式。

但有一个可能的解决方法。

当您单击POI时，会打开一个InfoWindow。可以修改InfoWindow原型以便能够访问InfoWindow内容，而无需引用InfoWindow实例。

      //store the original setContent-function
      var fx = google.maps.InfoWindow.prototype.setContent;

      //override the built-in setContent-method
      google.maps.InfoWindow.prototype.setContent = function (content) {
          //when argument is a node
          if (content.querySelector) {
              //search for the address
              var addr = content.querySelector('.gm-basicinfo .gm-addr');
              if (addr) {

                  alert(addr.textContent);
                  //leave the function here 
                  //when you don't want the InfoWindow to appear

              }
          }
          //run the original setContent-method
          fx.apply(this, arguments);
      };

演示：http://jsfiddle.net/doktormolle/Vkf43/

注意：信息窗口的选择器没有文档记录，它们可能会在未来更改。

- Dr.Molle

---

没有信息窗口的兴趣点怎么样（例如巴黎地铁站）？ - user1361491

你可以使用同样的方法来处理中转窗口，只是它们有不同的内容，需要对代码进行相应调整。它们的内容以<div dir="ltr" jstcache="0">开头。如果想获得完整信息，请尝试在@dr-molle提出的修改过的setContent函数的第一行添加console.log(content);。 - Sverrir Sigmundarson

Answer 2

我知道这是一个老问题，但最近在地图API中已经修复了。现在你可以监听地图图标的点击事件。

从3.26版本开始，您应该监听地图对象上的“click”事件。如果用户点击POI，则会引发IconMouseEvent。此类扩展了常规MouseEvent，并包含一个名为placeId的属性。因此，您可以检查事件对象是否定义了placeId。placeId字段当然包含一个Place ID，您可以使用Places API获取有关所单击的图标的更多信息。在事件本身上调用stop()将防止Maps API显示默认信息窗口。

我准备了一个小演示，演示如何捕获点击事件并显示自己的信息窗口。

http://jsbin.com/parapex/edit?html,output

- Wolf Bergenheim