Google-kartat tapahtumat

Klikkaa merkintää zoomataksesi

Käytämme edellisessä sivulla olevaa karttaa: kartta, joka keskittyy Yhdistyneeseen kuningaskuntaan Lontooseen.

Nyt haluamme zoomata, kun käyttäjä klikkaa merkintää (liitämme tapahtumankäsittelijän merkintään, jotta kartta zoomaa klikattaessa)

Tämä on lisätty koodi:

Esimerkki

// Klikkaa merkintää ja zoomaa 9
google.maps.event.addListener(marker,'click',function() {
  map.setZoom(9);
  map.setCenter(marker.getPosition());
});

Käytämme addListener() -tapahtumankäsittelijää rekisteröidäksemme tapahtumailmoitukset. Tämä metodi hyväksyy seuraavat parametrit:

• Objekti
• Tapahtuma, jota kuunnellaan
• Funktio, joka kutsutaan tietyn tapahtuman tapahtuessa

Siirry takaisin merkintään

Tässä tallennamme zoomausmuutoksen ja siirrämme karttaa 3 sekunnin kuluttua:

Esimerkki

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);
});

Avaa tietokirjoitus klikattaessa merkintää

Klikkaa merkintää näyttääksesi tietokirjoituksen, joka sisältää tekstin:

Esimerkki

var infowindow = new google.maps.InfoWindow({
  sisältö: "Hei maailma!"
});
google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
});

Aseta merkintä ja avaa tietokirjoitus jokaiselle merkinnälle

Funktio suoritetaan, kun käyttäjä klikkaa karttaa.

placeMarker() -funktio asettaa merkinnän käyttäjän klikkaustapahtumassa ja näyttää tietokirjoituksen, joka sisältää merkinnän leveys- ja pituusasteen:

Esimerkki

google.maps.event.addListener(map, 'click', function(event) {
  placeMarker(map, event.latLng);
});
function placeMarker(map, location) {
  var marker = new google.maps.Marker({
    sijainti: location,
    kartta: map
  });
  var infowindow = new google.maps.InfoWindow({
    sisältö: 'Leveysaste: ' + location.lat() +
    'Leveysaste: ' + location.lng()
  });
  infowindow.open(map,marker);
}