Finestre informative

1. Introduzione
2. Aggiungere una finestra informativa
3. Apri una finestra informativa
4. Chiudere una finestra informativa
5. Spostare una finestra informativa

Introduzione

Un InfoWindow mostra contenuti (di solito testo o immagini) in un finestra popup sopra la mappa, in un determinato luogo. La finestra informativa ha contenuti e uno stelo rastremato. La punta dello stelo è attaccata a un posizione sulla mappa. Le finestre informative vengono visualizzate come finestra di dialogo per gli screen reader.

In genere, alleghi una finestra informativa a un marker, ma puoi anche allegare una finestra informativa a una latitudine/longitudine specifica, come descritto sezione sull'aggiunta di una finestra informativa di seguito.

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

Aggiungi una finestra informativa

Lo il costruttore InfoWindow prende un Oggetto letterale oggetto InfoWindowOptions, che specifica il valore iniziale parametri per visualizzare la finestra informativa.

Il valore letterale dell'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 delle informazioni finestra alla posizione su cui è ancorata la finestra informativa. In pratica, non è necessario specificare questo campo. Puoi lasciare l'impostazione predefinita valore.
• position contiene il valore LatLng in cui queste informazioni finestra è ancorata. Nota: un InfoWindow può essere collegato a un oggetto Marker (in questo caso la sua posizione si basa sul posizione dell'indicatore) o sulla mappa stessa in corrispondenza di un LatLng specificato. Un modo per recuperare un LatLng è utilizzare Servizio di geocodifica. Se apri una finestra informativa su un indicatore, la position.
• maxWidth specifica la larghezza massima delle informazioni in pixel. Per impostazione predefinita, una finestra informativa si espande per adattarla ai suoi contenuti, e a capo automaticamente il testo se la finestra informativa riempie la mappa. Se aggiungi un elemento maxWidth che la finestra informativa eseguirà il wrapping automatico per applicare la larghezza specificata. Se raggiunge la larghezza massima ed è presente verticale spazio sullo schermo, la finestra informativa potrebbe espandersi in verticale.

I contenuti di InfoWindow possono includere una stringa di testo, un snippet di codice 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 in modo esplicito i contenuti, puoi inserirli in un Aggiungi l'elemento <div> e definisci lo stile <div> con CSS. Puoi usare CSS anche per attivare lo scorrimento. Se non scegli attiva lo scorrimento e i contenuti superano lo spazio disponibile nelle informazioni potrebbe fuoriuscire 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() sulla InfoWindow, superando un InfoWindowOpenOptions oggetto letterale che specifica le seguenti opzioni:

• map consente di specificare la mappa o la panoramica in Street View da aprire.
• anchor contiene un punto di ancoraggio (ad esempio Marker). Se l'opzione anchor è null o non definita, le informazioni verrà aperta nella relativa proprietà position.

// 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;
index.ts

// 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;
index.js

Nell'esempio seguente viene impostato 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 la relativa focus() . Valuta la possibilità di utilizzare questo metodo insieme a un visible prima di impostare lo stato attivo. Chiamata a questo metodo su informazioni non visibili finestra non avrà alcun effetto. Chiama open() per rendi visibile una finestra informativa.

Chiudere una finestra informativa

Per impostazione predefinita, una finestra informativa rimane aperta finché l'utente non fa clic sul pulsante di chiusura (una croce in alto a destra nella finestra informativa) o premi il tasto ESC. Puoi anche chiudere esplicitamente la finestra informativa chiamando il relativo close() .

Quando una finestra informativa è chiusa, lo stato attivo torna sull'elemento che si trovava lo stato attivo prima dell'apertura della finestra informativa. Se quell'elemento non è disponibile, lo stato attivo viene spostato di nuovo sulla mappa. Per eseguire l'override di questo comportamento, puoi ascoltare l'evento closeclick e gestire manualmente lo stato attivo come mostrato nell' 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() dalla finestra informativa oppure
• Applica la finestra informativa a un nuovo indicatore utilizzando InfoWindow.open(). Nota: se chiami il numero open() senza passare un indicatore, InfoWindow utilizzerà la posizione specificato al momento della costruzione tramite Valore letterale oggetto InfoWindowOptions.

Personalizzazione

Il corso InfoWindow non offre la personalizzazione. Invece, vedi il personalizzate esempio di popup per vedere come creare un popup completamente personalizzato.