使自定义叠加层可点击(Google Maps API v3) [英] Make custom overlay clickable (Google Maps API v3)

问题描述

我有一个继承自 google.maps.OverlayView 的自定义叠加类 (ImageOverlay).我希望它响应 Google Maps 点击事件(不仅仅是 DOM 点击事件)，但仅仅使用 addListener 似乎并不能解决问题.

I have a custom overlay class (ImageOverlay) which inherits from google.maps.OverlayView. I want it to respond to Google Maps click events (not just DOM click events) but simply using addListener doesn't seem to do the trick.

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

e.g. I have a shapes array which contains a mixture of google.maps.Polygon and ImageOverlay objects:

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

单击多边形会触发警报，但单击自定义叠加层没有任何作用.

Clicking on the polygons triggers an alert but clicking on the custom overlays does nothing.

如何让 Google Maps API 将叠加层视为可点击?

How do I make Google Maps API treat the overlays as clickable?

推荐答案

v3 的更新:overlayLayer 不再接受鼠标事件.将您的叠加层添加到 overlayMouseTarget 代替，添加侦听器，它应该可以正常接收鼠标事件.

Update for v3: overlayLayer doesn't accept mouse events anymore. Add your overlay to overlayMouseTarget instead, add the listener, and it should receive mouse events normally.

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

这篇关于使自定义叠加层可点击(Google Maps API v3)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！