Google Maps - Ereignisse
Das JavaScript-Programm von Google Maps kann auf verschiedene vom Benutzer generierte Ereignisse reagieren. Dieses Kapitel enthält Beispiele für die Durchführung der Ereignisbehandlung während der Arbeit mit Google Maps.
Hinzufügen eines Ereignis-Listeners
Mit der Methode können Sie einen Ereignis-Listener hinzufügen addListener(). Es akzeptiert Parameter wie den Objektnamen, zu dem der Listener, der Name des Ereignisses und das Handler-Ereignis hinzugefügt werden sollen.
Beispiel
Das folgende Beispiel zeigt, wie Sie einem Markierungsobjekt einen Ereignis-Listener hinzufügen. Das Programm erhöht den Zoomwert der Karte jedes Mal um 5, wenn wir auf die Markierung doppelklicken.
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(17.433053, 78.412172);
function loadMap(){
var mapProp = {
center: myCenter,
zoom:5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
position: myCenter,
title:'Click to zoom'
});
marker.setMap(map);
//Zoom to 7 when clicked on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
}
</script>
</head>
<body onload = "loadMap()">
<div id = "googleMap" style = "width:580px; height:400px;"></div>
</body>
</html>Es erzeugt die folgende Ausgabe -
Öffnen eines Infofensters bei Klick
Der folgende Code öffnet ein Infofenster beim Klicken auf die Markierung -
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(17.433053, 78.412172);
function loadMap(){
var mapProp = {
center:myCenter,
zoom:4,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content:"Hi"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
</script>
</head>
<body onload = "loadMap()">
<div id = "googleMap" style = "width:580px; height:400px;"></div>
</body>
</html>Es erzeugt die folgende Ausgabe -
Listener entfernen
Sie können einen vorhandenen Listener mithilfe der Methode entfernen removeListener(). Diese Methode akzeptiert das Listener-Objekt, daher müssen wir den Listener einer Variablen zuweisen und an diese Methode übergeben.
Beispiel
Der folgende Code zeigt, wie Sie einen Listener entfernen -
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(17.433053, 78.412172);
function loadMap(){
var mapProp = {
center:myCenter,
zoom:4,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content:"Hi"
});
var myListener = google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
google.maps.event.removeListener(myListener);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "googleMap" style = "width:580px; height:400px;"></div>
</body>
</html>Es erzeugt die folgende Ausgabe -