overlay - example - Hacer que la superposición personalizada se pueda hacer clic(Google Maps API v3)

title marker google maps

Question

Tengo una clase de superposición personalizada ( ImageOverlay ) que hereda de google.maps.OverlayView . Quiero que responda a los eventos de clic de Google Maps (no solo a los eventos de clic de DOM), pero simplemente usar addListener no parece ser el truco.

por ejemplo, tengo una matriz de shapes que contiene una mezcla de objetos google.maps.Polygon e ImageOverlay :

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

Al hacer clic en los polígonos se activa una alerta, pero al hacer clic en las superposiciones personalizadas no se hace nada.

¿Cómo hago que la API de Google Maps trate las superposiciones como clicables?

Answer 1

Actualización para v3: overlayLayer ya no acepta eventos de mouse. Agregue su superposición a overlayMouseTarget en overlayMouseTarget lugar, agregue el oyente, y debería recibir los eventos del mouse normalmente.

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

Ver: http://code.google.com/apis/maps/documentation/javascript/reference.html#MapPanes

Answer 2

Maps API no puede determinar automáticamente en qué partes de su plantilla se puede hacer clic (es decir, si renderiza una imagen con un fondo transparente, si depende de su clase de superposición determinar si los clics en la región transparente cuentan como clics válidos o no )

Debe agregar detectores de DOM a las superposiciones que dibuja y luego activa su propio evento de clic en la API de Maps si este es un clic válido.

Ejemplo:

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>

Answer 3

También puede querer detener la propagación de eventos, de modo que los clics en la Superposición no se propaguen a los elementos a continuación (por ejemplo, polígonos, marcadores, etc., depende de su Panel)

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

Answer 4

para GoogleAPI v3. Como dicen los chicos a continuación, pero con algunas correcciones:

En la función LocalityCustomOverlay.prototype.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); 
});

Fuera, directamente a su superposición personalizada:

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