当用户点击地图上的（商业）地点时如何获取点击事件

Posted 2023-02-23

【中文标题】当用户点击地图上的（商业）地点时如何获取点击事件

【英文标题】：How to get a click event when a user clicks a (business) place on the map

【发布时间】：2014-08-05 17:05:48

【问题描述】：

我知道如何在地图上设置点击事件，并且在点击随机位置时效果很好。但是当我点击一个商业地点时，Google Maps 会显示包含该商业信息的气球，但是不会将点击事件引发到我的 javascript。

您可以在此地理编码演示 (http://rjshade.com/projects/gmaps-autocomplete/) 中看到这种情况。浏览地图到某个城市并单击一个随机位置：地址显示在文本框中（万岁！）。现在找到一些营业地点并单击它：地图弹出气球，但没有向 JavaScript 发送单击事件来更新文本框。具有讽刺意味的是：所需的地址信息在气球中可用！

如何处理谷歌地图中商户的点击事件？

截图：

【参考方案1】：

编者注：此答案适用于 3.23 版。自 2016 年发布 3.24 版本以来，您可以使用 clickableIcons 映射选项。 See this answer.

---

基本上没有选项来处理对 POI 的点击。

当然，您可以通过样式简单地隐藏这些功能，但是当您想让它们在地图上可见时，这里有一个解决方法（基于：click event listener on styled map icons and labels）：

当您单击 POI 时，会打开一个信息窗口，您可以在此处访问。

覆盖InfoWindow-原型的setPosition-方法，使其触发地图点击。

//keep a reference to the original setPosition-function
var fx = google.maps.InfoWindow.prototype.setPosition;

//override the built-in setPosition-method
google.maps.InfoWindow.prototype.setPosition = function () 

  //logAsInternal isn't documented, but as it seems
  //it's only defined for InfoWindows opened on POI's
  if (this.logAsInternal) 
    google.maps.event.addListenerOnce(this, 'map_changed',function () 
      var map = this.getMap();
      //the infoWindow will be opened, usually after a click on a POI
      if (map) 
        //trigger the click
        google.maps.event.trigger(map, 'click', latLng: this.getPosition());
      
    );
  
  //call the original setPosition-method
  fx.apply(this, arguments);
;

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

【讨论】：

谢谢，这个解决方法效果很好。在上面使用的地理编码演示的上下文中，唯一的缺点是 POI 位置的地理编码地址并不总是与气球中列出的 POI 的官方地址相匹配。我将尝试通过 Google Maps API Places Library 进行另一次往返以获取此信息...

要从气球中获取详细信息（地址），请参阅***.com/questions/21486868/…

爱上代码，你可以把它放在适当的位置，它就可以工作

如果您使用 signed_in 参数，我发现这在 3.20 版中不再有效

@Ben_hawk：它似乎不受 API 版本的影响，对我来说它可以工作（没有signed_in），无论版本如何。

【参考方案2】：

这是在 Google Maps API issue tracker 中跟踪的问题 #4797，最近已修复，在 3.26 版中可用。

从 3.26 版开始，您应该在 Map 对象上监听“click”事件。如果用户单击 POI，则会引发 IconMouseEvent。该类扩展了Regular MouseEvent 并包含一个名为placeId 的属性。因此您可以检查事件对象是否已定义 placeId。 placeId 字段当然包含一个 Place Id，您可以将其与 Places API 一起使用以获取有关被点击图标的更多信息。

我准备了一个小演示：http://jsbin.com/parapex/10/edit?html,output

当您单击地图时，会触发 ClickHandler 对象的 handleClick 方法。您可以看到它检查 placeId。然后它路由到该地点（使用 placeId），最后使用 Maps API 中的 Places Service 获取有关该地点的信息（在本例中为名称、图标和地址）。