Mapy Google - Wydarzenia
Program Google Maps JavaScript może reagować na różne zdarzenia generowane przez użytkownika. W tym rozdziale przedstawiono przykłady pokazujące, jak obsługiwać zdarzenia podczas pracy z Google Maps.
Dodawanie detektora zdarzeń
Możesz dodać detektor zdarzeń za pomocą metody addListener(). Akceptuje parametry, takie jak nazwa obiektu, do którego chcemy dodać detektor, nazwa zdarzenia i zdarzenie obsługi.
Przykład
Poniższy przykład pokazuje, jak dodać detektor zdarzeń do obiektu znacznika. Program zwiększa wartość powiększenia mapy o 5 za każdym razem, gdy klikamy dwukrotnie na marker.
<!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>Generuje następujący wynik -
Otwieranie okna informacyjnego po kliknięciu
Poniższy kod otwiera okno informacyjne po kliknięciu znacznika -
<!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>Generuje następujący wynik -
Usuwanie słuchacza
Możesz usunąć istniejący odbiornik za pomocą metody removeListener(). Ta metoda akceptuje obiekt detektora, dlatego musimy przypisać detektor do zmiennej i przekazać go do tej metody.
Przykład
Poniższy kod pokazuje, jak usunąć odbiornik -
<!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>Generuje następujący wynik -