Сделайте пользовательский оверлей кликабельным (Google Maps API v3)

Question

У меня есть собственный класс наложения (ImageOverlay), который наследуется от google.maps.OverlayView.Я хочу, чтобы он реагировал на события клика Google Maps (не только на события клика DOM), но простое использование addListener, похоже, не сработало.

например, у меня есть массив shapes, который содержит смесь объектов google.maps.Polygon и ImageOverlay:

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

Щелчок по полигонам вызывает предупреждение, но при нажатии на пользовательские оверлеиничего не делает.

Как заставить API Карт Google обрабатывать наложения как интерактивные?

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

API Карт не может автоматически определить, какие части вашего наложения должны быть активными (т. Е. Если вы отрисовываете изображение с прозрачным фоном, если ваш класс наложения будет зависеть, чтобы определить, считаются ли клики в прозрачной области действительными щелкает или нет).

Вы должны добавить прослушиватели DOM к наложенным изображениям, а затем запустить собственное событие нажатия 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');
    }
});