Сделайте пользовательское наложение активируемым по щелчку (Google Maps API v3)
У меня есть пользовательский класс наложения (ImageOverlay) который наследовался google.maps.OverlayView. Я хочу, чтобы это ответило на события щелчка Google Maps (не только события щелчка DOM), но и просто использование addListener кажется, не добивается цели.
например, у Меня есть a shapes массив, который содержит смесь google.maps.Polygon и ImageOverlay объекты:
for (var i in shapes) {
google.maps.event.addListener(shapes[i], 'click', function(){alert('hi')});
}
Нажатие на полигоны инициировало предупреждение, но нажатие на пользовательские оверлейные программы ничего не делает.
Как я делаю Google Maps обработкой API оверлейные программы как активируемую по щелчку?
1 ответ
API Maps не может автоматически определить, какие части вашего наложения должны быть кликабельными (например, если вы отображаете изображение с прозрачным фоном, ваш класс наложения должен определить, считаются ли клики в прозрачной области действительными кликами или нет).
Вы должны добавить DOM-слушатели к оверлеям, которые вы рисуете, а затем вызвать собственное событие клика Maps API, если это действительный клик.
Example:
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.
}