google-maps - 如何在 IE 和 Firefox 中使用 Google 地图 v3 将点击事件绑定到自定义叠加层

Question

我已经按照 google 文档的说明对我的覆盖对象进行了子类化，我的 onAdd() 函数如下所示：

MyOverlay.onAdd() {
    var div_parent = document.createElement("DIV");
    var div_child = document.createElement("DIV");
    div_child.innerHTML = "Click Me";
    div_parent.appendChild( div_child );
    this.getPanes().overlayLayer.appendChild(div_parent);
    var this = that;
    google.maps.event.addDomListener( div_parent, 'click', function(){
        google.maps.event.trigger(that, 'click'); // from [http://stackoverflow.com/questions/3361823/make-custom-overlay-clickable-google-maps-api-v3]
        alert("Clicked");
    } );

}

我的代码只能在 IE 中正常运行，但在 Firefox 和 Chrome 中，将不再触发点击事件。

那么如何解决问题呢？

Answer 1

而不是使用overlayLayer mapPanes，您应该使用overlayMouseTarget。

参考：http ://code.google.com/apis/maps/documentation/javascript/overlays.html#CustomOverlays

Answer 2

我知道这是一篇旧帖子，但如果您想知道，这里是解决方案：

在上面的代码中，您需要从以下位置更改覆盖功能：

this.getPanes().overlayLayer.appendChild(div_parent);

至：

this.getPanes().overlayMouseTarget.appendChild(div_parent);

Answer 3

另请注意，即使您使用覆盖窗格，您的单击事件也会在桌面上捕获，但要使触摸事件起作用，则需要鼠标目标窗格。