Сделать пользовательский оверлей кликабельным (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 лечения наложение как кликабельное?
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
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>
вы также можете остановить распространение событий, чтобы клики по наложению не распространялись на элементы ниже (например, полигоны, маркеры и т. д., зависит от вашей панели)
//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');
}
});
для 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);
});