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

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

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

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

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

как сделать Google Maps API лечения наложение как кликабельное?

27
google-maps-api-3 overlay

4 ответов

обновление для 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

56

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>
12

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

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

для GoogleAPI v3. Как ребята сказали ниже, но с некоторыми исправлениями:

на LocalityCustomOverlay.прототип.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);
});
0