Google Maps -geleenthede
Klik op die merker om te zoem
Ons gebruik steeds die kaart van die vorige bladsy: 'n kaart gesentreer op Londen, Engeland.
Nou wil ons zoem wanneer 'n gebruiker op die merker klik (Ons heg 'n gebeurtenishanteerder aan 'n merker wat die kaart inzoomen wanneer dit geklik word).
Hier is die bygevoegde kode:
Voorbeeld
// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
Ons registreer vir gebeurteniskennisgewings deur die addListener()-gebeurtenishanteerder te gebruik. Daardie metode neem 'n voorwerp, 'n gebeurtenis om na te luister en 'n funksie om te roep wanneer die gespesifiseerde gebeurtenis plaasvind.
Pan Terug na Merker
Hier stoor ons die zoemveranderinge en paneer die kaart na 3 sekondes terug:
Voorbeeld
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);
});
Maak 'n inligtingvenster oop wanneer u op die merker klik
Klik op die merker om 'n inligtingsvenster met 'n bietjie teks te wys:
Voorbeeld
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
Stel merkers en maak InfoWindow oop vir elke merker
Voer 'n funksie uit wanneer die gebruiker op die kaart klik.
Die placeMarker()-funksie plaas 'n merker waar die gebruiker geklik het, en wys 'n inligtingsvenster met die breedte- en lengtegrade van die merker:
Voorbeeld
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);
}