Google Maps- Veranstaltungen
Klicken Sie zum Zoomen auf die Markierung
Wir verwenden immer noch die Karte von der vorherigen Seite: eine Karte, die auf London, England, zentriert ist.
Jetzt wollen wir zoomen, wenn ein Benutzer auf die Markierung klickt (Wir hängen einen Event-Handler an eine Markierung an, die die Karte zoomt, wenn darauf geklickt wird).
Hier ist der hinzugefügte Code:
Beispiel
// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
Wir registrieren uns für Ereignisbenachrichtigungen mit dem Ereignishandler addListener(). Diese Methode nimmt ein Objekt, ein Ereignis, auf das gewartet werden soll, und eine Funktion, die aufgerufen wird, wenn das angegebene Ereignis eintritt.
Zurück zur Markierung schwenken
Hier speichern wir die Zoomänderungen und schwenken die Karte nach 3 Sekunden zurück:
Beispiel
google.maps.event.addListener(marker,'click',function() {
var pos = map.getZoom();
map.setZoom(9);
map.setCenter(marker.getPosition());
window.setTimeout(function() {map.setZoom(pos);},3000);
});
Öffnen Sie ein Infofenster, wenn Sie auf die Markierung klicken
Klicken Sie auf die Markierung, um ein Infofenster mit Text anzuzeigen:
Beispiel
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
Marker setzen und InfoWindow für jeden Marker öffnen
Führen Sie eine Funktion aus, wenn der Benutzer auf die Karte klickt.
Die Funktion placeMarker() platziert einen Marker dort, wo der Benutzer geklickt hat, und zeigt ein Infofenster mit den Längen- und Breitengraden des Markers an:
Beispiel
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(map, event.latLng);
});
function placeMarker(map, location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
var infowindow = new google.maps.InfoWindow({
content: 'Latitude: ' + location.lat() +
'<br>Longitude: ' + location.lng()
});
infowindow.open(map,marker);
}