如何在用户单击地图上的(业务)位置时获取单击事件

Question

我知道如何在地图上设置点击事件,点击随机位置时效果很好.但是,当我点击营业地点时,Google地图会显示包含有关业务信息的气球,但不会将点击事件提升到我的JavaScript.

您可以在此地理编码演示(http://rjshade.com/projects/gmaps-autocomplete/)上看到这种情况.浏览地图到某个城市并单击随机位置:地址显示在文本框中(华友世纪!).现在找到一些营业场所并点击:地图会弹出气球,但不会向JavaScript发送任何点击事件来更新文本框.讽刺的是:所需的地址信息是在气球可用!

如何处理Google地图中商家位置的点击事件？

截图:

Answer 1

编者注:这个答案适用于版本3.23.自2016年发布的3.24版以来,您可以使用clickableIcons地图选项.看到这个答案.

基本上没有办法处理POI的点击.

当然,你可以通过样式隐藏这些功能,但是当你想让它们在地图上可见时,这里有一个解决方法(基于:在样式化的地图图标和标签上点击事件监听器):

单击POI并打开InfoWindow时,您可以访问该位置.

覆盖setPosition-prototype的-method, InfoWindow以便触发地图上的单击.

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

Answer 2

这是在Google Maps API问题跟踪器中跟踪的问题#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服务获取有关该地点的信息(在本例中为名称,图标和地址).