当用户点击地图上的(商业)地点时如何获得点击事件

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

你可以看到这个地理编码演示( http://rjshade.com/projects/gmaps-autocomplete/ )。 浏览地图到某个城市,然后单击一个随机位置:地址显示在文本框(华友世纪!)中。 现在find一些营业地点并点击:地图popup气球,但没有点击事件发送到JavaScript来更新文本框。 讽刺的是:所需的地址信息在气球中可用!

如何在Google地图上处理商业地点的点击事件?

截图: 点击“动物园”的地方会弹出气球,但不会在搜索框中提供地址,因为没有收到点击事件

编者按:这个答案是适用的,直到版本3.23。 自2016年发布3.24版本以来,您可以使用clickableIcons映射选项。 看到这个答案 。


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

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

当你点击一个信息窗口打开一个信息窗口,这就是你可以访问的地方。

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

这是在Google Maps API问题跟踪器中跟踪的 #4797 问题 ,最近已经解决,并在3.26版本中提供。

从版本3.26开始,你应该听地图对象上的“点击”事件。 如果用户点击一个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获取有关地点的信息(本例中为名称,图标和地址)。