使自定义叠加层可点击(Google Maps API v3)

Question

我有一个自定义覆盖类(ImageOverlay)继承自google.maps.OverlayView.我希望它能够响应谷歌地图点击事件(不仅仅是DOM点击事件),但只是使用addListener似乎没有做到这一点.

例如,我有一个shapes包含google.maps.Polygon和ImageOverlay对象混合的数组:

for (var i in shapes) {
  google.maps.event.addListener(shapes[i], 'click', function(){alert('hi')});
}

单击多边形会触发警报,但单击自定义叠加层不会执行任何操作.

如何使Google Maps API将叠加视为可点击？

Answer 1

v3的更新:overlayLayer不再接受鼠标事件.overlayMouseTarget相反,添加覆盖,添加侦听器,它应该正常接收鼠标事件.

//add element to clickable layer 
this.getPanes().overlayMouseTarget.appendChild(div);

// set this as locally scoped var so event does not get confused
var me = this;

// Add a listener - we'll accept clicks anywhere on this div, but you may want
// to validate the click i.e. verify it occurred in some portion of your overlay.
google.maps.event.addDomListener(div, 'click', function() {
    google.maps.event.trigger(me, 'click');
});

请参阅:http://code.google.com/apis/maps/documentation/javascript/reference.html#MapPanes

Answer 2

Maps API无法自动确定叠加层的哪些部分应该是可点击的(例如,如果您渲染具有透明背景的图像,则是否取决于您的叠加层,以确定透明区域中的点击是否计为有效点击次数).

您应该将DOM侦听器添加到您绘制的叠加层,然后触发您自己的Maps API单击事件(如果这是有效的单击).

例:

FooBar.prototype.onAdd = function() {
  // Create a div and append it to a map pane. 
  var div = document.createElement('div');
  div.style = "height: 100px; width: 100px";
  this.getPanes().overlayLayer.appendChild(div);

  // set this as locally scoped var so event does not get confused
  var me = this;

  // Add a listener - we'll accept clicks anywhere on this div, but you may want
  // to validate the click i.e. verify it occurred in some portion of your overlay.
  google.maps.event.addDomListener(div, 'click', function() {
    google.maps.event.trigger(me, 'click');
  });

  // Position your overlay etc.
}