Benutzerdefiniertes Overlay anklickbar machen (Google Maps API v3)

Question

Ich habe eine benutzerdefinierte Overlay-Klasse (ImageOverlay), die von google.maps.OverlayView erbt. Ich möchte, dass es auf Google Maps-Klickereignisse reagiert (nicht nur auf DOM-Klickereignisse), aber die Verwendung von addListener scheint den Trick nicht zu erfüllen.

z.B. Ich habe einen shapes-Array, das eine Mischung aus google.maps.Polygon und ImageOverlay Objekten enthält:

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

auf der Polygone Klicken auf einen Alarm auslöst, aber nichts tut, auf dem benutzerdefinierten Overlays klicken.

Wie kann ich Google Maps API so behandeln, dass die Overlays als anklickbar behandelt werden?

Answer 1

Update für v3: overlayLayer akzeptiert keine Mausereignisse mehr. Fügen Sie Ihr Overlay stattdessen zu overlayMouseTarget hinzu, fügen Sie den Listener hinzu, und es sollte Mausereignisse normalerweise erhalten.

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

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

Answer 2

Die Google Maps-API kann nicht automatisch bestimmen, welche Teile Ihres Overlays anklickbar sein sollen (dh wenn Sie ein Bild mit einem transparenten Hintergrund rendern, würde Ihre Overlay-Klasse bestimmen, ob Klicks im transparenten Bereich als zählen) gültige Klicks oder nicht).

Sie sollten DOM-Listener zu den von Ihnen gezeichneten Overlays hinzufügen und dann Ihr eigenes Google Maps-API-Klickereignis auslösen, wenn es sich um einen gültigen Klick handelt.

Beispiel:

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

Sie können auch Ereignispropagierung stoppen, so dass die Klicks auf der Overlay nicht auf die Elemente unten ausbreitet (zB Polygone, Marker, etc, hängt von Ihrem Pane)

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

für GoogleAPI v3. Wie Jungs gesagt unten, aber mit einigen Korrekturen:

In LocalityCustomOverlay.prototype.onAdd Funktion:

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

Draußen direkt auf Ihrem benutzerdefinierten Overlay:

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