- Introduzione
- Aggiungere una finestra informativa
- Apri una finestra informativa
- Chiudere una finestra informativa
- 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 valoreLatLng
in cui queste informazioni finestra è ancorata. Nota: unInfoWindow
può essere collegato a un oggettoMarker
(in questo caso la sua posizione si basa sul posizione dell'indicatore) o sulla mappa stessa in corrispondenza di unLatLng
specificato. Un modo per recuperare unLatLng
è utilizzare Servizio di geocodifica. Se apri una finestra informativa su un indicatore, laposition
.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 elementomaxWidth
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 esempioMarker
). Se l'opzioneanchor
ènull
o non definita, le informazioni verrà aperta 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 km (208 mi) " + "south west of the nearest large town, Alice Springs; 450 km " + "(280 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 km (208 mi) " + "south west of the nearest large town, Alice Springs; 450 km " + "(280 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;
Prova Sample
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 numeroopen()
senza passare un indicatore,InfoWindow
utilizzerà la posizione specificato al momento della costruzione tramite Valore letterale oggettoInfoWindowOptions
.
Personalizzazione
Il corso InfoWindow
non offre la personalizzazione. Invece,
vedi il
personalizzate
esempio di popup
per vedere come creare un popup completamente personalizzato.