Eventi

Seleziona la piattaforma: Android iOS JavaScript

In questa pagina vengono descritti gli eventi dell'interfaccia utente e gli eventi di errore che puoi esaminare e gestire in modo programmatico.

Eventi dell'interfaccia utente

JavaScript all'interno del browser è basato su eventi, il che significa che JavaScript risponde alle interazioni generando eventi e si aspetta un programma per ascoltare eventi interessanti. Esistono due tipi di eventi:

  • Gli eventi utente (come gli eventi "clic" del mouse) vengono propagati dal DOM a l'API Maps JavaScript. Questi eventi sono separati e distinti di eventi DOM standard.
  • Le notifiche di modifica dello stato della MVC riflettono le modifiche nell'API Maps JavaScript oggetti e vengono denominati utilizzando la convenzione property_changed.

Ogni oggetto dell'API Maps JavaScript esporta una serie di eventi con nome. I programmi interessati a determinati eventi registreranno i ascoltatori di eventi JavaScript per quegli eventi ed eseguire il codice quando questi eventi vengono ricevuti chiamata addListener() per registrare i gestori di eventi sull'oggetto.

Il seguente esempio mostra quali eventi vengono attivati dall'google.maps.Map mentre interagisci con la mappa.

Per un elenco completo degli eventi, consulta il Riferimento all'API Maps JavaScript. Gli eventi sono elencati in una sezione separata per ogni oggetto che contiene eventi.

Eventi UI

Alcuni oggetti all'interno dell'API Maps JavaScript sono progettati per rispondere a eventi utente come eventi del mouse o della tastiera. Ad esempio, questi sono alcuni dei brand eventi che un oggetto google.maps.marker.AdvancedMarkerElement può ascoltare:

  • 'click'
  • 'drag'
  • 'dragend'
  • 'dragstart'
  • 'gmp-click'

Per l'elenco completo, vedi AdvancedMarkerElement . Questi eventi possono sembrare eventi DOM standard, ma in realtà fanno parte dell'API Maps JavaScript. Poiché browser diversi implementare diversi modelli di eventi DOM, l'API Maps JavaScript fornisce questi meccanismi per ascoltare e rispondere agli eventi DOM senza dover gestire le varie peculiarità tra i browser. Questi eventi in genere passano anche argomenti all'interno dell'evento indicando uno stato dell'interfaccia utente (ad esempio la posizione del mouse).

Modifiche di stato MVC

Gli oggetti MVC in genere contengono lo stato. Ogni volta che la proprietà di un oggetto cambia, l'API Maps JavaScript attiva un evento modificato dalla proprietà. Ad esempio, l'API attiva un evento zoom_changed su una mappa quando lo zoom della mappa modifiche di livello. Puoi intercettare queste modifiche di stato richiamando addListener() per registrare anche i gestori di eventi sull'oggetto.

Gli eventi utente e le modifiche dello stato MVC possono sembrare simili, ma in genere vuoi per trattarli in modo diverso nel codice. Gli eventi MVC, ad esempio, non vengono trasmessi argomenti all'interno del proprio evento. Ti consigliamo di controllare la proprietà modificata alla modifica di uno stato MVC richiamando il getProperty su quell'oggetto.

Gestire gli eventi

Per registrarti per le notifiche degli eventi, usa addListener() di gestione degli eventi. Questo metodo prende un evento da ascoltare e da chiamare quando si verifica l'evento specificato.

Esempio: eventi sulla mappa e sull'indicatore

Il seguente codice combina gli eventi utente con quelli di modifica dello stato. Alleghiamo un gestore di eventi a un indicatore che ingrandisce la mappa quando viene fatto clic. Aggiungiamo anche gestore di eventi alla mappa per le modifiche alla proprietà center e sposta la mappa nuovamente in corrispondenza dell'indicatore dopo 3 secondi dal ricevimento del Evento center_changed:

TypeScript

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

  const myLatlng = { lat: -25.363, lng: 131.044 };

  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: myLatlng,
      mapId: "DEMO_MAP_ID",
    }
  );

  const marker = new google.maps.marker.AdvancedMarkerElement({
    position: myLatlng,
    map,
    title: "Click to zoom",
  });

  map.addListener("center_changed", () => {
    // 3 seconds after the center of the map has changed, pan back to the
    // marker.
    window.setTimeout(() => {
      map.panTo(marker.position as google.maps.LatLng);
    }, 3000);
  });

  marker.addListener("click", () => {
    map.setZoom(8);
    map.setCenter(marker.position as google.maps.LatLng);
  });
}

initMap();
index.ts

JavaScript

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
  const myLatlng = { lat: -25.363, lng: 131.044 };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: myLatlng,
    mapId: "DEMO_MAP_ID",
  });
  const marker = new google.maps.marker.AdvancedMarkerElement({
    position: myLatlng,
    map,
    title: "Click to zoom",
  });

  map.addListener("center_changed", () => {
    // 3 seconds after the center of the map has changed, pan back to the
    // marker.
    window.setTimeout(() => {
      map.panTo(marker.position);
    }, 3000);
  });
  marker.addListener("click", () => {
    map.setZoom(8);
    map.setCenter(marker.position);
  });
}

initMap();
index.js
Visualizza esempio

Prova Sample

Suggerimento: se stai cercando di rilevare una modifica delle nell'area visibile, assicurati di utilizzare lo specifico evento bounds_changed piuttosto che al costituente zoom_changed e center_changed eventi. Poiché l'API Maps JavaScript attiva questi ultimi eventi in modo indipendente, getBounds() potrebbe non segnalare risultati utili solo dopo che l'area visibile è stata modificata in modo autorevole. Se desideri getBounds() dopo questo evento, assicurati di ascoltare il bounds_changed evento.

Esempio: eventi di modifica e trascinamento della forma

Quando una forma viene modificata o trascinata, viene attivato un evento al completamento della un'azione. Per un elenco degli eventi e alcuni snippet di codice, consulta Forme.

Visualizza Esempio (rectangle-event.html)

Accedi agli argomenti negli eventi dell'interfaccia utente

Gli eventi UI nell'API Maps JavaScript in genere passano un argomento evento, a cui il listener di eventi può accedere, indicando lo stato dell'interfaccia utente quando . Ad esempio, generalmente viene superato un evento 'click' UI. un MouseEvent contenente una proprietà latLng che indica la posizione su cui hai fatto clic sulla mappa. Tieni presente che questo comportamento è specifico dell'interfaccia utente eventi; Le modifiche dello stato MVC non passano argomenti nei loro eventi.

Puoi accedere agli argomenti dell'evento all'interno di un listener di eventi allo stesso modo accedi alle proprietà di un oggetto. Nell'esempio seguente viene aggiunto un evento per la mappa e crea un indicatore quando l'utente fa clic sulla mappa la località selezionata.

TypeScript

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -25.363882, lng: 131.044922 },
      mapId: "DEMO_MAP_ID",
    }
  );

  map.addListener("click", (e) => {
    placeMarkerAndPanTo(e.latLng, map);
  });
}

function placeMarkerAndPanTo(latLng: google.maps.LatLng, map: google.maps.Map) {
  new google.maps.marker.AdvancedMarkerElement({
    position: latLng,
    map: map,
  });
  map.panTo(latLng);
}

initMap();
index.ts

JavaScript

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary(
    "marker",
  );
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -25.363882, lng: 131.044922 },
    mapId: "DEMO_MAP_ID",
  });

  map.addListener("click", (e) => {
    placeMarkerAndPanTo(e.latLng, map);
  });
}

function placeMarkerAndPanTo(latLng, map) {
  new google.maps.marker.AdvancedMarkerElement({
    position: latLng,
    map: map,
  });
  map.panTo(latLng);
}

initMap();
index.js
Visualizza esempio

Prova Sample

Utilizzo delle chiusure nei listener di eventi

Quando si esegue un listener di eventi, spesso è vantaggioso avere sia di dati privati e permanenti collegati a un oggetto. JavaScript non supporto "privato" ma supporta chiusure che consentono alle funzioni interne di accedere come la codifica one-hot delle variabili categoriche. Le chiusure sono utili nei listener di eventi per accedere a variabili non normalmente collegati agli oggetti su cui si verificano gli eventi.

L'esempio seguente utilizza una chiusura di funzione nel listener di eventi per e assegnare un messaggio segreto a un insieme di indicatori. Se fai clic su ciascun indicatore, rivelare una parte del messaggio segreto, che non è contenuta nel l'indicatore stesso.

TypeScript

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -25.363882, lng: 131.044922 },
      mapId: "DEMO_MAP_ID",
    }
  );

  const bounds: google.maps.LatLngBoundsLiteral = {
    north: -25.363882,
    south: -31.203405,
    east: 131.044922,
    west: 125.244141,
  };

  // Display the area between the location southWest and northEast.
  map.fitBounds(bounds);

  // Add 5 markers to map at random locations.
  // For each of these markers, give them a title with their index, and when
  // they are clicked they should open an infowindow with text from a secret
  // message.
  const secretMessages = ["This", "is", "the", "secret", "message"];
  const lngSpan = bounds.east - bounds.west;
  const latSpan = bounds.north - bounds.south;

  for (let i = 0; i < secretMessages.length; ++i) {
    const marker = new google.maps.marker.AdvancedMarkerElement({
      position: {
        lat: bounds.south + latSpan * Math.random(),
        lng: bounds.west + lngSpan * Math.random(),
      },
      map: map,
    });

    attachSecretMessage(marker, secretMessages[i]);
  }
}

// Attaches an info window to a marker with the provided message. When the
// marker is clicked, the info window will open with the secret message.
function attachSecretMessage(
  marker: google.maps.marker.AdvancedMarkerElement,
  secretMessage: string
) {
  const infowindow = new google.maps.InfoWindow({
    content: secretMessage,
  });

  marker.addListener("click", () => {
    infowindow.open(marker.map, marker);
  });
}

initMap();
index.ts

JavaScript

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -25.363882, lng: 131.044922 },
    mapId: "DEMO_MAP_ID",
  });
  const bounds = {
    north: -25.363882,
    south: -31.203405,
    east: 131.044922,
    west: 125.244141,
  };

  // Display the area between the location southWest and northEast.
  map.fitBounds(bounds);

  // Add 5 markers to map at random locations.
  // For each of these markers, give them a title with their index, and when
  // they are clicked they should open an infowindow with text from a secret
  // message.
  const secretMessages = ["This", "is", "the", "secret", "message"];
  const lngSpan = bounds.east - bounds.west;
  const latSpan = bounds.north - bounds.south;

  for (let i = 0; i < secretMessages.length; ++i) {
    const marker = new google.maps.marker.AdvancedMarkerElement({
      position: {
        lat: bounds.south + latSpan * Math.random(),
        lng: bounds.west + lngSpan * Math.random(),
      },
      map: map,
    });

    attachSecretMessage(marker, secretMessages[i]);
  }
}

// Attaches an info window to a marker with the provided message. When the
// marker is clicked, the info window will open with the secret message.
function attachSecretMessage(marker, secretMessage) {
  const infowindow = new google.maps.InfoWindow({
    content: secretMessage,
  });

  marker.addListener("click", () => {
    infowindow.open(marker.map, marker);
  });
}

initMap();
index.js
Visualizza esempio

Prova Sample

Ottieni e imposta proprietà nei gestori di eventi

Nessun evento di modifica dello stato MVC nel sistema di eventi dell'API Maps JavaScript quando l'evento viene attivato. (Gli eventi utente passare argomenti che possono essere ispezionati. Se devi ispezionare una proprietà in caso di modifica di stato della MVC, devi chiamare esplicitamente getProperty() su quell'oggetto. Questo l'ispezione recupererà sempre lo stato attuale dell'MVC , che potrebbe non essere lo stato in cui l'evento è stato attivato per la prima volta.

Nota: l'impostazione esplicita di una proprietà in un gestore di eventi che risponde a un cambiamento di stato di quel particolare può produrre comportamenti imprevedibili e/o indesiderati. Impostazione una proprietà di questo tipo attiverà un nuovo evento, ad esempio, e se una proprietà all'interno di questo gestore di eventi, potresti creare ciclo infinito.

Nell'esempio seguente, abbiamo configurato un gestore di eventi per rispondere aumenta lo zoom degli eventi visualizzando una finestra informativa che mostra quel livello.

TypeScript

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;

  const originalMapCenter = new google.maps.LatLng(-25.363882, 131.044922);
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: originalMapCenter,
    }
  );

  const infowindow = new google.maps.InfoWindow({
    content: "Change the zoom level",
    position: originalMapCenter,
  });

  infowindow.open(map);

  map.addListener("zoom_changed", () => {
    infowindow.setContent("Zoom: " + map.getZoom()!);
  });
}

initMap();
index.ts

JavaScript

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps");
  const originalMapCenter = new google.maps.LatLng(-25.363882, 131.044922);
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: originalMapCenter,
  });
  const infowindow = new google.maps.InfoWindow({
    content: "Change the zoom level",
    position: originalMapCenter,
  });

  infowindow.open(map);
  map.addListener("zoom_changed", () => {
    infowindow.setContent("Zoom: " + map.getZoom());
  });
}

initMap();
index.js
Visualizza esempio

Prova Sample

Ascolta eventi DOM

Il modello di eventi dell'API Maps JavaScript crea e gestisce il proprio personalizzati. Tuttavia, il DOM (Document Object Model) all'interno del browser crea e invia i propri eventi, in base al tipo del browser in uso. Se vuoi acquisire e rispondere a questi eventi, l'API Maps JavaScript fornisce addDomListener() metodo statico per ascoltare e associare gli eventi DOM.

Questo metodo pratico ha una firma come mostrato di seguito:

addDomListener(instance:Object, eventName:string, handler:Function)

dove instance può essere qualsiasi elemento DOM supportato dal browser, tra cui:

  • I membri gerarchici del DOM, ad esempio window o document.body.myform
  • Elementi con nome come document.getElementById("foo")

Tieni presente che addDomListener() supera l'evento indicato al browser, che lo gestisce in base al modello di eventi DOM del browser; tuttavia, quasi tutti i browser moderni supportano almeno il livello DOM 2. Per ulteriori informazioni informazioni sugli eventi a livello di DOM, consulta Livelli DOM di Mozilla reference.)

TypeScript

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;

  const mapDiv = document.getElementById("map") as HTMLElement;
  const map = new google.maps.Map(mapDiv, {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644),
  });

  // We add a DOM event here to show an alert if the DIV containing the
  // map is clicked.
  google.maps.event.addDomListener(mapDiv, "click", () => {
    window.alert("Map was clicked!");
  });
}

initMap();
index.ts

JavaScript

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps");
  const mapDiv = document.getElementById("map");
  const map = new google.maps.Map(mapDiv, {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644),
  });

  // We add a DOM event here to show an alert if the DIV containing the
  // map is clicked.
  google.maps.event.addDomListener(mapDiv, "click", () => {
    window.alert("Map was clicked!");
  });
}

initMap();
index.js

HTML

<html>
  <head>
    <title>Listening to DOM Events</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
  </body>
</html>
index.html
Visualizza esempio

Prova Sample

Sebbene il codice riportato sopra sia il codice dell'API Maps JavaScript, il parametro Il metodo addDomListener() si associa all'oggetto window del browser e consente all'API di comunicare con oggetti al di fuori Dominio normale dell'API.

Rimuovi listener di eventi

Per rimuovere un listener di eventi specifico, quest'ultimo deve essere stato assegnato a un . Quindi puoi chiamare removeListener(), passando il nome della variabile a cui è stato assegnato il listener.

var listener1 = marker.addListener('click', aFunction);

google.maps.event.removeListener(listener1);

Per rimuovere tutti i listener da una determinata istanza, chiama clearInstanceListeners(), passando il nome dell'istanza.

var listener1 = marker.addListener('click', aFunction);
var listener2 = marker.addListener('mouseover', bFunction);

// Remove listener1 and listener2 from marker instance.
google.maps.event.clearInstanceListeners(marker);

Per rimuovere tutti i listener per un tipo di evento specifico per un'istanza specifica, chiama clearListeners(), passando il nome dell'istanza e l'evento nome.

marker.addListener('click', aFunction);
marker.addListener('click', bFunction);
marker.addListener('click', cFunction);

// Remove all click listeners from marker instance.
google.maps.event.clearListeners(marker, 'click');

Per ulteriori informazioni, consulta la documentazione di riferimento per spazio dei nomi google.maps.event.

Monitora gli errori di autenticazione

Se vuoi rilevare in modo programmatico un errore di autenticazione (ad esempio per inviare automaticamente un beacon), puoi preparare una funzione di callback. Se la seguente funzione globale è definita, verrà chiamata quando la classe l'autenticazione non riesce. function gm_authFailure() { /* Code */ };