Klicken Sie auf die Markierung um es zu vergrößern - anhängen Event-Handler Google Maps.
Klicken Sie auf den Marker Zoom
Wir verwenden immer noch die Karte von der vorherigen Seite: eine Karte zentriert auf London, England.
Jetzt wollen wir vergrößern, wenn ein Benutzer auf den Marker klicken (Wir legen einen Event-Handler auf einen Marker, der die Karte zoomt, wenn darauf geklickt).
Hier ist der Code hinzugefügt:
Beispiel
// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
}); Versuch es selber " Wir registrieren für Ereignisbenachrichtigungen , die unter Verwendung von addListener() Event - Handler. Diese Methode nimmt ein Objekt, um ein Ereignis zu hören, weil und eine Funktion aufzurufen, wenn das angegebene Ereignis eintritt.
Pan Zurück zur Markierung
Hier fügen wir einen Event-Handler auf der Karte für Änderungen an der "Mitte" Eigenschaft und schwenken die Karte zurück auf die Markierung nach 3 Sekunden auf einem center_changed Ereignis:
Beispiel
google.maps.event.addListener(map,'center_changed',function() {
window.setTimeout(function() {
map.panTo(marker.getPosition());
},3000);
}); Versuch es selber " Öffnen Sie ein Infofenster beim Klicken auf die Markierung
Klicken Sie auf die Markierung ein Infofenster mit etwas Text zu zeigen:
Beispiel
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
}); Versuch es selber " Markierungen setzen und öffnen Infofenster für jeden Marker
Führen Sie eine Funktion, wenn der Benutzer auf der Karte klickt.
Die placeMarker() Funktion setzt einen Merker in dem der Benutzer geklickt hat, und zeigt ein Infofenster mit den Längen- und Breitengrade der Markierung:
Beispiel
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
function placeMarker(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);
} Versuch es selber " Google Maps - Events Referenz
Google Maps - API - Referenz .