Google Maps Ereignisbehandlung
Ereignisbehandlung
- Übersicht der Kartenereignisse
- Ereignis-Listener
- Closures in Ereignis-Listenern verwenden
- Übergebene Argumente in Ereignissen verwenden
- Ereignisse an Objekte binden
- DOM-Ereignisse überwachen
- Ereignis-Listener entfernen
Übersicht der Kartenereignisse
JavaScript im Browser ist ereignisgesteuert, d. h., dass JavaScript auf Interaktionen mit der Erzeugung von Ereignissen reagiert und erwartet, dass ein Programm interessante Ereignisse überwacht. Beispielsweise erstellen Maus- und Tastaturinteraktionen des Nutzers im Browser Ereignisse, die innerhalb des DOM weitergeleitet werden. Programme, die bestimmte Ereignisse benötigen, registrieren JavaScript-Ereignis-Listener für diese Ereignisse und führen Code aus, wenn diese Ereignisse empfangen werden. Das Google Maps-API ergänzt dieses Ereignismodell um benutzerdefinierte Ereignisse für Maps-API-Objekte, die definiert werden können. Es ist wichtig zu beachten, dass die Maps-API-Ereignisse deutlich von den Standard-DOM-Ereignissen abgegrenzt werden. Da unterschiedliche Browser jedoch unterschiedliche DOM-Ereignismodelle implementieren, bietet die Maps-API auch Mechanismen, mit deren Hilfe diese DOM-Ereignisse überwacht und auf sie reagiert werden kann, ohne mit den verschiedenen browserübergreifenden Besonderheiten umgehen zu müssen.
Ereignis-Listener
zurück zum StartEreignisse in der Google Maps-API werden mithilfe von Dienstfunktionen im GEvent-Namespace zum Registrieren von Ereignis-Listenern verwendet. Jedes Maps-API-Objekt exportiert eine Anzahl benannter Ereignisse. Beispielsweise exportiert unter anderem das GMap2-Objekt click-, dblclick- und move-Ereignisse. Jedes Ereignis findet in einem angegebenen Kontext statt und kann Argumente übergeben, die diesen Kontext identifizieren. Beispielsweise startet das mousemove-Ereignis, wenn der Nutzer die Maus in einem Kartenobjekt bewegt, und übergibt GLatLng der geografischen Position, an der sich die Maus befindet.
Eine vollständige Liste der GMap2-Ereignisse und der Argumente, die sie generieren, finden Sie unter GMap2.Events.
Verwenden Sie zum Registrieren für eine Benachrichtigung über diese Ereignisse die statische Methode GEvent.addListener(). Diese Methode verwendet ein Objekt, ein zu überwachendes Ereignis und eine Funktion, die aufgerufen wird, wenn das angegebene Ereignis eintritt. Dieser Codeschnipsel beispielsweise zeigt jedesmal ein Alert an, wenn der Nutzer auf die Karte klickt:
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
GEvent.addListener(map, "click", function() {
alert("You clicked the map.");
});
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
GEvent.addListener(map, "click", function() {
alert("You clicked the map.");
});
Beispiel anzeigen (event-simple.html)
Listener können auch den Kontext des Ereignisses erfassen. Im folgenden Beispielcode werden die geografische Breite und Länge der Kartenmitte angezeigt, nachdem der Nutzer die Karte verschoben hat.
var map = new GMap2(document.getElementById("map"));
GEvent.addListener(map, "moveend", function() {
var center = map.getCenter();
document.getElementById("message").innerHTML = center.toString();
});
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
GEvent.addListener(map, "moveend", function() {
var center = map.getCenter();
document.getElementById("message").innerHTML = center.toString();
});
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
Closures in Ereignis-Listenern verwenden
zurück zum StartWenn ein Ereignis-Listener ausgeführt wird, ist es meistens von Vorteil, sowohl vertrauliche als auch dauerhafte Daten einem Objekt zuzuordnen. JavaScript unterstützt keine "vertraulichen" Instanzdaten, doch es unterstützt Closures. Dadurch wird inneren Funktionen erlaubt, auf äußere Variablen zuzugreifen. Closures sind nützlich innerhalb von Ereignis-Listenern, um auf Variablen zuzugreifen, die normalerweise nicht den Objekten zugeordnet sind, bei denen Ereignisse auftreten. Das folgende Beispiel verwendet eine Funktions-Closure im Ereignis-Listener, um mehreren Markierungen eine geheime Meldung zuzuordnen. Das Klicken auf eine Markierung zeigt einen Teil der geheimen Meldung an, die nicht in der Markierung selbst enthalten ist.
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
// Creates a marker at the given point
// The five markers show a secret message when clicked
// but that message is not within the marker's instance data
function createMarker(point, number) {
var marker = new GMarker(point);
var message = ["This","is","the","secret","message"];
marker.value = number;
GEvent.addListener(marker, "click", function() {
var myHtml = "<b>#" + number + "</b><br/>" + message[number -1];
map.openInfoWindowHtml(point, myHtml);
});
return marker;
}
// Add 5 markers to the map at random locations
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 5; i++) {
var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
map.addOverlay(createMarker(point, i + 1));
}
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
// Creates a marker at the given point
// The five markers show a secret message when clicked
// but that message is not within the marker's instance data
function createMarker(point, number) {
var marker = new GMarker(point);
var message = ["This","is","the","secret","message"];
marker.value = number;
GEvent.addListener(marker, "click", function() {
var myHtml = "<b>#" + number + "</b><br/>" + message[number -1];
map.openInfoWindowHtml(point, myHtml);
});
return marker;
}
// Add 5 markers to the map at random locations
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 5; i++) {
var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
map.addOverlay(createMarker(point, i + 1));
}
Beispiel anzeigen (event-closure.html)
Übergebene Argumente in Ereignissen verwenden
zurück zum StartViele Ereignisse im Maps-API-Ereignissystem übergeben Argumente, wenn das Ereignis ausgelöst wird. Das GMap2-"click"-Ereignis beispielsweise übergibt overlay und overlaylatlng, wenn der Kartenklick auf einem Overlay erfolgt. Andernfalls übergibt es ein latlng-Objekt der Kartenkoordinate. Sie können auf diese Argumente zugreifen, indem Sie die angegebenen Symbole direkt an die Funktionen in den Ereignis-Listenern übergeben.
Im nachfolgenden Beispiel wird zunächst getestet, ob der Klick auf einer Kartenkachel erfolgt ist. Dazu wird überprüft, ob das latlng-Argument definiert ist. Falls ja, kann über der angeklickten Koordinate ein Infofenster geöffnet und die in einen Pixelbereich konvertierte Koordinate zusammen mit der Zoomstufe angezeigt werden.
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
GEvent.addListener(map,"click", function(overlay, latlng) {
if (latlng) {
var myHtml = "The GPoint value is: " + map.fromLatLngToDivPixel(latlng) + " at zoom level " + map.getZoom();
map.openInfoWindow(latlng, myHtml);
}
});
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
GEvent.addListener(map,"click", function(overlay, latlng) {
if (latlng) {
var myHtml = "The GPoint value is: " + map.fromLatLngToDivPixel(latlng) + " at zoom level " + map.getZoom();
map.openInfoWindow(latlng, myHtml);
}
});
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
Beispiel anzeigen (event-arguments.html)
Ereignisse an Objektmethoden binden
zurück zum StartFunktionen sind hilfreich, wenn Sie Ereignis-Listener bestimmten Instanzen eines Objekts zuordnen möchten. Falls Sie stattdessen eine Methode auf allen Instanzen eines Objekts als Reaktion auf Ereignisse ausführen möchten, können Sie GEvent.bind() verwenden. Im folgenden Beispiel bindet eine Instanz einer Anwendungsklasse Kartenereignisse an ihre eigenen Methoden und ändert den Klassenstatus, wenn Ereignisse ausgelöst werden:
function MyApplication() {
this.counter = 0;
this.map = new GMap2(document.getElementById("map"));
this.map.setCenter(new GLatLng(37.4419, -122.1419), 13);
GEvent.bind(this.map, "click", this, this.onMapClick);
}
MyApplication.prototype.onMapClick = function() {
this.counter++;
alert("You have clicked the map " + this.counter + " " +
(this.counter == 1 ? "time" : "times"));
}
var application = new MyApplication();
this.counter = 0;
this.map = new GMap2(document.getElementById("map"));
this.map.setCenter(new GLatLng(37.4419, -122.1419), 13);
GEvent.bind(this.map, "click", this, this.onMapClick);
}
MyApplication.prototype.onMapClick = function() {
this.counter++;
alert("You have clicked the map " + this.counter + " " +
(this.counter == 1 ? "time" : "times"));
}
var application = new MyApplication();
Beispiel anzeigen (event-bind.html)
DOM-Ereignisse überwachen
zurück zum StartDas Google Maps-API-Ereignismodell erstellt und verwaltet seine eigenen benutzerdefinierten Ereignisse. Das DOM erstellt und sendet jedoch auch seine eigenen Ereignisse entsprechend dem verwendeten Browser-Ereignismodell. Wenn Sie diese Ereignisse erfassen und darauf reagieren möchten, bietet Ihnen das Google Maps-API browserneutrale Wrapper, um DOM-Ereignisse zu binden und sie zu überwachen, ohne dass benutzerdefinierter Code erforderlich ist. Die statische GEvent.addDomListener()-Methode registriert einen Ereignis-Handler für ein DOM-Ereignis auf einem DOM-Knoten. Auf ähnliche Weise ermöglicht die statische Methode GEvent.bindDom(), Ereignis-Handler für DOM-Ereignisse auf Klasseninstanzen zu registrieren.
Ereignis-Listener entfernen
zurück zum StartWenn ein Ereignis-Listener nicht länger benötigt wird, sollten Sie ihn entfernen. Das kann sogar in Fällen erforderlich sein, in denen das Ereignis nur einmal ausgelöst werden soll. Das Entfernen von Ereignis-Listenern, die über anonyme Funktionen innerhalb von Closures definiert wurden, kann kompliziert sein. Die Funktionen addListener(), addDomListener(), bind() und bindDom() geben jedoch einen GEventListener-Handle zurück, der zur letztendlichen Deregistrierung des Handlers verwendet werden kann. Im folgenden Beispiel wird als Reaktion auf einen Klick eine Markierung auf der Karte platziert. Jeder nachfolgende Klick entfernt den Ereignis-Listener. Beachten Sie, dass der removeOverlay()-Code niemals als Ergebnis ausgeführt wird. Beachten Sie außerdem, dass Sie einen Ereignis-Listener sogar aus dem Ereignis-Listener heraus entfernen können.
function MyApplication() {
this.counter = 0;
this.map = new GMap2(document.getElementById("map"));
this.map.setCenter(new GLatLng(37.4419, -122.1419), 13);
var myEventListener = GEvent.bind(this.map, "click", this, function(overlay, latlng) {
if (this.counter == 0) {
if (latlng) {
this.map.addOverlay(new GMarker(latlng))
this.counter++;
} else if (overlay instanceof GMarker) {
this.removeOverlay(marker)
}
} else {
GEvent.removeListener(myEventListener);
}
});
}
function load() {
var application = new MyApplication();
}
Beispiel anzeigen (event-removal.html)
this.counter = 0;
this.map = new GMap2(document.getElementById("map"));
this.map.setCenter(new GLatLng(37.4419, -122.1419), 13);
var myEventListener = GEvent.bind(this.map, "click", this, function(overlay, latlng) {
if (this.counter == 0) {
if (latlng) {
this.map.addOverlay(new GMarker(latlng))
this.counter++;
} else if (overlay instanceof GMarker) {
this.removeOverlay(marker)
}
} else {
GEvent.removeListener(myEventListener);
}
});
}
function load() {
var application = new MyApplication();
}
zurück zum Start
© Google Maps
