web-dev-qa-db-fra.com

Rendre la superposition personnalisée cliquable (API Google Maps v3)

J'ai une classe de superposition personnalisée (ImageOverlay) qui hérite de google.maps.OverlayView. Je souhaite qu'il réponde aux événements de clic de Google Maps (pas seulement aux événements de clic DOM), mais que le simple fait d'utiliser addListener ne semble pas faire l'affaire. 

par exemple. J'ai un tableau shapes qui contient un mélange d'objets google.maps.Polygon et ImageOverlay:

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

Un clic sur les polygones déclenche une alerte, mais un clic sur les superpositions personnalisées ne fait rien. 

Comment faire en sorte que Google Maps API traite les incrustations comme cliquables?

overlaygoogle-maps-api-3
29
Tamlyn

Mise à jour pour v3: overlayLayer n'accepte plus les événements de souris. Ajoutez votre superposition à overlayMouseTarget à la place, ajoutez le programme d'écoute et il devrait recevoir les événements de 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

57
Tim

L'API Google Maps ne peut pas déterminer automatiquement les parties de votre incrustation qui doivent être cliquables (par exemple, si vous restituez une image avec un arrière-plan transparent, s'il appartiendrait à votre classe d'incrustation de déterminer si les clics dans la région transparente sont comptés comme des clics valides ou non. ).

Vous devez ajouter des écouteurs DOM aux calques que vous dessinez, puis déclencher votre propre événement de clic de l'API Google 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>
12
plexer

pour GoogleAPI v3. Comme les gars l'ont dit ci-dessous, mais avec quelques corrections:

Dans 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 superposition personnalisée:

google.maps.event.addListener(CUSTOM_OVERLAY_OBJECT, 'click', function(event) {
    console.log('event:', event);
});
0
dimpiax

Vous pouvez également vouloir arrêter la propagation d'événements, de sorte que les clics sur la superposition ne se propagent pas aux éléments ci-dessous (par exemple, les polygones, les marqueurs, etc., dépendent de votre volet).

//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
Nir Soudry