Настраивать пользовательские оверлеи (API Карт Google v3)

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

Ответ 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

Ответ 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.
}

Ответ 3

Вам также может потребоваться распространение событий остановки, так что клики на Overlay не будут распространяться на элементы ниже (например, полигоны, маркеры и т.д., зависит от вашей панели)

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

Ответ 4

для GooglePAP 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);
});