使自定义叠加层可点击（Google 地图 API v3）

Question

我有一个自定义覆盖类（

ImageOverlay

），它继承自

google.maps.OverlayView

。我希望它能够响应 Google 地图点击事件（不仅仅是 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.
}

Answer 3

适用于 GoogleAPI v3。正如下面的人所说，但有一些更正：

在 LocalityCustomOverlay.prototype.onAdd 函数中：

var self = this;
google.maps.event.addDomListener(this._div, 'click', function(event) {
    // stop click reaction on another layers
    event.stopPropagation();

    // add also event to 3rd parameter for catching
    google.maps.event.trigger(self, 'click', event); 
});

外部，直接到您的自定义叠加层：

google.maps.event.addListener(CUSTOM_OVERLAY_OBJECT, 'click', function(event) {
    console.log('event:', event);
});

Answer 4

您可能还希望停止事件传播，以便对叠加层的点击不会传播到下面的元素（例如多边形、标记等，取决于您的窗格）

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

// 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(events) {
    if (/*handling event*/) {
        event.preventDefault(); // The important part
    }
    else {
        google.maps.event.trigger(me, 'click');
    }
});

Answer 5

使地图叠加层可点击的简单方法是在

addListener

事件中命名叠加层：

 google.maps.event.addListener(historicalOverlay, 'click', function(event) {
                placeMarker(event.latLng);

效果非常好！！！