Сделайте пользовательский оверлей кликабельным (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

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.
}
</code>

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');
    }
});