Finestre informative

Seleziona piattaforma: Android iOS JavaScript
  1. Introduzione
  2. Aggiungere una finestra informativa
  3. Aprire una finestra informativa
  4. Chiudere una finestra informativa
  5. Spostare una finestra informativa

Introduzione

Un elemento InfoWindow mostra i contenuti (solitamente testo o immagini) in una finestra popup sopra la mappa, in un determinato punto. La finestra informativa ha un'area dei contenuti e uno stelo rastremato. La punta dello stelo è collegata a una posizione specificata sulla mappa. Le finestre informative vengono visualizzate come una finestra di dialogo per gli screen reader.

Finestra informativa che mostra informazioni su una località in Australia.

In genere, aggiungi una finestra informativa a un indicatore, ma puoi anche allegarla a una latitudine/longitudine specifica, come descritto nella sezione sull'aggiunta di una finestra informativa sotto.

In generale, le finestre informative sono un tipo di overlay. Per informazioni su altri tipi di overlay, consulta la sezione Disegnare sulla mappa.

Aggiungere una finestra informativa

Il costruttore InfoWindow utilizza un valore letterale oggetto InfoWindowOptions, che specifica i parametri iniziali per visualizzare la finestra informativa.

Il valore letterale oggetto InfoWindowOptions contiene i seguenti campi:

  • content contiene una stringa di testo o un nodo DOM da visualizzare nella finestra informativa.
  • pixelOffset contiene un offset dalla punta della finestra informativa a quella in cui è ancorata la finestra. In pratica, non è necessario specificare questo campo. Puoi mantenere il valore predefinito.
  • position contiene l'elemento LatLng a cui è ancorata questa finestra informativa. Nota: un InfoWindow può essere collegato a un oggetto Marker (in questo caso la sua posizione è basata sulla posizione dell'indicatore) o sulla mappa stessa in un LatLng specificato. Un modo per recuperare un servizio LatLng è utilizzare il servizio di geocodifica. Se apri una finestra informativa su un indicatore, position verrà aggiornato automaticamente.
  • maxWidth specifica la larghezza massima della finestra informativa in pixel. Per impostazione predefinita, una finestra informativa si espande per adattarsi ai contenuti e, se la finestra informativa riempie la mappa, esegue il wrapping automatico del testo. Se aggiungi un elemento maxWidth, la finestra informativa si aggregherà automaticamente per applicare la larghezza specificata. Se raggiunge la larghezza massima e sullo schermo è presente spazio verticale, la finestra informativa potrebbe espandersi in verticale.

I contenuti di InfoWindow possono contenere una stringa di testo, uno snippet HTML o un elemento DOM. Per impostare i contenuti, specificali all'interno di InfoWindowOptions o chiama setContent() su InfoWindow in modo esplicito.

Se vuoi ridimensionare esplicitamente i contenuti, puoi inserirli in un elemento <div> e assegnare uno stile a <div> con CSS. Puoi utilizzare il CSS anche per attivare lo scorrimento. Tenete presente che, se non attivate lo scorrimento e i contenuti superano lo spazio disponibile nella finestra informativa, i contenuti potrebbero uscire dalla finestra informativa.

Aprire una finestra informativa

Quando crei una finestra informativa, questa non viene visualizzata automaticamente sulla mappa. Per rendere visibile la finestra informativa, devi chiamare il metodo open() su InfoWindow, passando un valore letterale oggetto InfoWindowOpenOptions specificando le seguenti opzioni:

  • map specifica la mappa o il panorama di Street View su cui aprire i file.
  • anchor contiene un punto di ancoraggio (ad esempio, Marker). Se l'opzione anchor è null o non definita, la finestra informativa si aprirà nella relativa proprietà position.

TypeScript

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.

function initMap(): void {
  const uluru = { lat: -25.363, lng: 131.044 };
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: uluru,
    }
  );

  const contentString =
    '<div id="content">' +
    '<div id="siteNotice">' +
    "</div>" +
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' +
    '<div id="bodyContent">' +
    "<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large " +
    "sandstone rock formation in the southern part of the " +
    "Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) " +
    "south west of the nearest large town, Alice Springs; 450&#160;km " +
    "(280&#160;mi) by road. Kata Tjuta and Uluru are the two major " +
    "features of the Uluru - Kata Tjuta National Park. Uluru is " +
    "sacred to the Pitjantjatjara and Yankunytjatjara, the " +
    "Aboriginal people of the area. It has many springs, waterholes, " +
    "rock caves and ancient paintings. Uluru is listed as a World " +
    "Heritage Site.</p>" +
    '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' +
    "https://en.wikipedia.org/w/index.php?title=Uluru</a> " +
    "(last visited June 22, 2009).</p>" +
    "</div>" +
    "</div>";

  const infowindow = new google.maps.InfoWindow({
    content: contentString,
    ariaLabel: "Uluru",
  });

  const marker = new google.maps.Marker({
    position: uluru,
    map,
    title: "Uluru (Ayers Rock)",
  });

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

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.
function initMap() {
  const uluru = { lat: -25.363, lng: 131.044 };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: uluru,
  });
  const contentString =
    '<div id="content">' +
    '<div id="siteNotice">' +
    "</div>" +
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' +
    '<div id="bodyContent">' +
    "<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large " +
    "sandstone rock formation in the southern part of the " +
    "Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) " +
    "south west of the nearest large town, Alice Springs; 450&#160;km " +
    "(280&#160;mi) by road. Kata Tjuta and Uluru are the two major " +
    "features of the Uluru - Kata Tjuta National Park. Uluru is " +
    "sacred to the Pitjantjatjara and Yankunytjatjara, the " +
    "Aboriginal people of the area. It has many springs, waterholes, " +
    "rock caves and ancient paintings. Uluru is listed as a World " +
    "Heritage Site.</p>" +
    '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' +
    "https://en.wikipedia.org/w/index.php?title=Uluru</a> " +
    "(last visited June 22, 2009).</p>" +
    "</div>" +
    "</div>";
  const infowindow = new google.maps.InfoWindow({
    content: contentString,
    ariaLabel: "Uluru",
  });
  const marker = new google.maps.Marker({
    position: uluru,
    map,
    title: "Uluru (Ayers Rock)",
  });

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

window.initMap = initMap;
Visualizza l'esempio

Prova Esempio

L'esempio seguente imposta il maxWidth di una finestra informativa: visualizza esempio.

Impostare lo stato attivo su una finestra informativa

Per impostare lo stato attivo su una finestra informativa, chiama il metodo focus(). Ti consigliamo di utilizzare questo metodo insieme a un evento visible prima di impostare lo stato attivo. Chiamare questo metodo in una finestra informativa non visibile non avrà alcun effetto. Chiama open() per rendere visibile una finestra informativa.

Chiudere una finestra informativa

Per impostazione predefinita, una finestra informativa rimane aperta finché l'utente non fa clic sul controllo di chiusura (una croce in alto a destra della finestra informativa) o premi il tasto Esc. Puoi anche chiudere la finestra informativa in modo esplicito chiamando il relativo metodo close().

Quando viene chiusa una finestra informativa, viene spostato di nuovo l'elemento attivo prima dell'apertura della finestra. Se tale elemento non è disponibile, lo stato attivo viene spostato nuovamente sulla mappa. Per ignorare questo comportamento, puoi ascoltare l'evento closeclick e gestire manualmente lo stato attivo come mostrato nell'esempio seguente:

infoWindow.addListener('closeclick', ()=>{
  // Handle focus manually.
});

Spostare una finestra informativa

Puoi modificare la posizione di una finestra informativa in due modi:

  • Chiama setPosition() nella finestra informativa oppure
  • Collega la finestra informativa a un nuovo indicatore utilizzando il metodo InfoWindow.open(). Nota: se chiami open() senza passare un indicatore, InfoWindow utilizzerà la posizione specificata al momento della costruzione tramite il valore letterale oggetto InfoWindowOptions.

Personalizzazione

Il corso InfoWindow non offre la personalizzazione. Consulta invece l'esempio di popup personalizzato per scoprire come creare un popup completamente personalizzato.