当用户点击地图上的（商业）地点时如何获得点击事件 [英] How to get a click event when a user clicks a (business) place on the map

问题描述

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

您可以在此地理编码演示中看到这种情况（地图选项。 查看此答案。

---

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

当然，您可以通过样式隐藏这些功能，但是当您想要为了让它们在地图上可见，以下是一种解决方法（基于：点击风格地图图标和标签上的事件监听器）：

当您点击一个InfoWindow打开的POI时，这就是您可以访问的位置。

$ b 覆盖 InfoWindow 的 setPosition

  // //保留对原始setPosition函数的引用
 var fx = google.maps.InfoWindow.prototype.setPosition; 
 
 //覆盖内置setPosition-method 
 google.maps.InfoWindow.prototype.setPosition = function（）{
 
 // logAsInternal不是记录，但因为它似乎
 //它只为在POI的
上打开的InfoWindows定义if（this.logAsInternal）{
 google.maps.event.addListenerOnce（this，'map_changed'，function （）{
 var map = this.getMap（）; 
 // infoWindow将被打开，通常在点击一个兴趣点后b $ b if（map）{
 //触发点击
 google.maps.event.trigger（map，'click'，{latLng：this.getPosition（）}）; 
} 
}）; 
} 
 //调用原始的setPosition-method 
 fx.apply（this，arguments）; 
}; 
  

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

I know how to set a click event on a map, and it works fine when clicking random locations. But when I click a business place, Google Maps will display the balloon containing the information about the business, but not raise the click event to my JavaScript.

You can see this happing on this geocoding demo (http://rjshade.com/projects/gmaps-autocomplete/). Browse the map to some city and click a random location: the address is displayed in the text box (Hurray!). Now find some business place and click that: the map pops up the balloon, but no click event is sent to the JavaScript to update the text box. Ironically: the required address info is available in the balloon!

How to handle click events on business places in Google maps?

Screenshot:

解决方案

Editor's note: this answer was applicable until version 3.23. Since version 3.24 released in 2016, you can use clickableIcons map option. See this answer.

---

Basically there is no option to handle clicks on the POI's.

Of course you can simply hide these features via styles, but when you want to keep them visible on the map, here's a workaround(based on: click event listener on styled map icons and labels):

When you click a POI an InfoWindow opens, that's where you may get access.

Override the setPosition-method of the InfoWindow-prototype so that it triggers a click on the map.

//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);
};

Demo: http://jsfiddle.net/doktormolle/aSz2r/

这篇关于当用户点击地图上的（商业）地点时如何获得点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！