Rendre la superposition personnalisée cliquable (API GoogleMaps V3))
j'ai une classe de superposition personnalisée (ImageOverlay) qui hérite de google.maps.OverlayView. Je veux qu'il réponde à Google Maps click events (pas seulement DOM click events) mais tout simplement en utilisant addListener ne semble pas faire l'affaire.
par exemple, j'ai un shapes array qui contient un mélange de google.maps.Polygon et ImageOverlay objets:
for (var i in shapes) {
google.maps.event.addListener(shapes[i], 'click', function(){alert('hi')});
}
cliquer sur les polygones déclenche une alerte mais cliquer sur les superpositions personnalisées ne fait rien.
Comment faire pour que L'API GoogleMaps traite des superpositions comme cliquable?
4 réponses
mise à Jour de la v3: overlayLayer n'accepte plus les évènements de souris. Ajouter votre superposition overlayMouseTarget à la place, ajoutez l'écouteur, et il devrait recevoir les évènements de la souris normalement.
//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');
});
voir: http://code.google.com/apis/maps/documentation/javascript/reference.html#MapPanes
L'API Maps ne peut pas automatiquement déterminer quelles parties de votre superposition doivent être cliquables (c'est-à-dire si vous rendez une image avec un fond transparent, si serait jusqu'à votre classe de superposition pour déterminer si les clics dans la région transparente comptent comme des clics valides ou non).
vous devez ajouter des écouteurs DOM aux superpositions que vous dessinez, puis déclencher votre propre événement de clic de L'API Maps s'il s'agit d'un clic valide.
Exemple:
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>
Vous pouvez également vouloir arrêter la propagation d'événements, de sorte que les clics sur la superposition ne se propagera pas aux éléments ci-dessous (par exemple, polygones, marqueurs, etc, dépend de votre panneau)
//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');
}
});
pour GoogleAPI v3. Comme les gars l'ont dit ci-dessous, mais avec quelques corrections:
LocalityCustomOverlay.prototype.onAdd fonction:
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);
});
à l'Extérieur, directement sur votre overlays:
google.maps.event.addListener(CUSTOM_OVERLAY_OBJECT, 'click', function(event) {
console.log('event:', event);
});