Info Window

lezione InfoWindow

lezione google.maps.InfoWindow

Un overlay che ha l'aspetto di una bolla e spesso è collegato a un indicatore.

Questo corso estende MVCObject.

Accesso chiamando const {InfoWindow} = await google.maps.importLibrary("maps") o const {InfoWindow} = await google.maps.importLibrary("streetView"). Consulta la sezione Librerie nell'API Maps JavaScript.

InfoWindow
InfoWindow([opts])
Parametri: 
Crea una finestra informativa con le opzioni specificate. Può essere posizionato su una mappa in una determinata posizione o sopra un indicatore, a seconda di ciò che viene specificato nelle opzioni. A meno che la panoramica automatica non venga disattivata, un'InfoInfo scorrerà la mappa per renderla visibile quando è aperta. Dopo aver creato una finestra temporale, devi richiamare la linea per visualizzarla sulla mappa. L'utente può fare clic sul pulsante Chiudi in InfoWindow per rimuoverlo dalla mappa oppure lo sviluppatore può chiamare close() per ottenere lo stesso risultato.
close
close()
Parametri: nessuno
Valore di restituzione: nessuno
Chiude questa InfoWindow rimuovendola dalla struttura DOM.
focus
focus()
Parametri: nessuno
Valore di restituzione: nessuno
Imposta lo stato attivo su questo InfoWindow. Ti consigliamo di utilizzare questo metodo insieme a un evento visible per assicurarti che InfoWindow sia visibile prima di impostarne lo stato attivo. Una InfoWindow non visibile non può essere attiva.
getContent
getContent()
Parametri: nessuno
Return Value:  string|Element|null|Text|undefined i contenuti di questa InfoWindow. Funziona come i contenuti impostati in precedenza.
getPosition
getPosition()
Parametri: nessuno
Valore di ritorno:  LatLng|null|undefined la posizione LatLng di questa InfoWindow.
getZIndex
getZIndex()
Parametri: nessuno
Valore di ritorno:  number lo z-index di questa finestra temporale.
open
open([options, anchor])
Parametri: 
  • optionsInfoWindowOpenOptions|Map|StreetViewPanorama optional un oggetto InfoWindowOpenOptions (consigliato) o la mappa|panorama su cui eseguire il rendering di InfoWindow.
  • anchorMVCObject|AdvancedMarkerView optional l'ancoraggio a cui verrà posizionata questa InfoWindow. Se l'ancoraggio non è null, l'infoWindow sarà posizionata in alto al centro dell'ancoraggio. Il riquadro InfoWindow verrà visualizzato sulla stessa mappa o panoramica sulla pagina di ancoraggio (se disponibile).
Valore di restituzione: nessuno
Apre questa InfoWindow sulla mappa specificata. Facoltativamente, è possibile associare un InfoInfo a un anchor. Nell'API di base, l'unico ancoraggio è la classe indicatori. Tuttavia, un anchor può essere qualsiasi MVCObject che espone una proprietà LatLng position e, facoltativamente, una proprietà Point anchorPoint per il calcolo di pixelOffset (vedi InfoWindowOptions). anchorPoint è l'offset dalla posizione dell'ancoraggio alla punta dell'InfoWindow. Ti consigliamo di utilizzare l'interfaccia InfoWindowOpenOptions come singolo argomento per questo metodo. Per evitare che lo stato attivo del browser venga modificato, imposta InfoWindowOpenOptions.shouldFocus su false.
setContent
setContent([content])
Parametri: 
  • contentstring|Element|Text optionali contenuti che devono essere visualizzati da questa InfoWindow.
Valore di restituzione: nessuno
setOptions
setOptions([options])
Parametri: 
Valore di restituzione: nessuno
setPosition
setPosition([position])
Parametri: 
  • positionLatLng|LatLngLiteral optional la posizione LatLng in cui visualizzare questa InfoWindow.
Valore di restituzione: nessuno
setZIndex
setZIndex(zIndex)
Parametri: 
  • zIndexnumber lo z-index per questa finestra temporale. Una finestra Windows con uno z-index maggiore verrà mostrata davanti a tutti gli altri infoWindows con uno z-index inferiore.
Valore di restituzione: nessuno
Ereditata: addListener, bindTo, get, notify, set, setValues, unbind, unbindAll
closeclick
function()
Argomenti: nessuno
Questo evento viene attivato quando viene fatto clic sul pulsante Chiudi.
content_changed
function()
Argomenti: nessuno
Questo evento viene attivato quando la proprietà dei contenuti cambia.
domready
function()
Argomenti: nessuno
Questo evento viene attivato quando l'elemento <div> che include i contenuti di InfoWindow viene collegato al DOM. Ti consigliamo di monitorare questo evento se stai creando i contenuti della finestra informativa in modo dinamico.
position_changed
function()
Argomenti: nessuno
Questo evento viene attivato quando la proprietà della posizione cambia.
visible
function()
Argomenti: nessuno
Questo evento viene attivato quando InfoWindow è completamente visibile. Questo evento non viene attivato quando viene eseguita la panoramica di InfoWindow e poi di nuovo sullo schermo.
zindex_changed
function()
Argomenti: nessuno
Questo evento viene attivato quando lo z-index di InfoWindow cambia.

Interfaccia InfoWindowOptions

google.maps.InfoWindowOptions interfaccia

Oggetto InfoWindowOptions utilizzato per definire le proprietà che possono essere impostate in un InfoWindow.

ariaLabel optional
Tipo:  string optional
AriaLabel da assegnare all'InfoWindow.
content optional
Tipo:  string|Element|Text optional
Contenuti da visualizzare nell'InfoWindow. Può essere un elemento HTML, una stringa di testo normale o una stringa contenente HTML. Le dimensioni di InfoWindow verranno calcolate in base ai contenuti. Per impostare dimensioni esplicite per i contenuti, impostali come elementi HTML con tali dimensioni.
disableAutoPan optional
Tipo:  boolean optional
Predefinito: false
Disattiva la panoramica della mappa per rendere completamente visibile l'infoWindow all'apertura.
maxWidth optional
Tipo:  number optional
La larghezza massima dell'infoWindow, indipendentemente dal contenuto. Questo valore viene preso in considerazione solo se è impostato prima di una chiamata al numero open(). Per cambiare la larghezza massima quando modifichi i contenuti, chiama close(), setOptions() e poi open().
minWidth optional
Tipo:  number optional
La larghezza minima dell'infoWindow, indipendentemente dalla larghezza del contenuto. Quando utilizzi questa proprietà, ti consigliamo vivamente di impostare minWidth su un valore inferiore alla larghezza della mappa (in pixel). Questo valore viene preso in considerazione solo se è impostato prima di una chiamata al numero open(). Per modificare la larghezza minima quando modifichi i contenuti, chiama close(), setOptions() e poi open().
pixelOffset optional
Tipo:  Size optional
L'offset, in pixel, della punta della finestra informativa dal punto sulla mappa alle cui coordinate geografiche è ancorata la finestra informativa. Se viene aperta una finestra temporale con un anchor, pixelOffset verrà calcolato dalla proprietà anchorPoint dell'ancoraggio.
position optional
Tipo:  LatLng|LatLngLiteral optional
Il valore LatLng in cui visualizzare questa InfoWindow. Se l'infoWindow è aperta con un ancoraggio, verrà utilizzata la sua posizione.
zIndex optional
Tipo:  number optional
Tutte le infoWindows vengono visualizzate sulla mappa in ordine di z-index, con valori più alti davanti a InfoWindows, con valori più bassi. Per impostazione predefinita, le informazioni vengono visualizzate in base alla latitudine e le latitudini inferiori sono visualizzate davanti a InfoWindows a latitudine più alta. Le finestre di Windows sono sempre visualizzate davanti agli indicatori.

Interfaccia InfoWindowOpenOptions

google.maps.InfoWindowOpenOptions interfaccia

Opzioni per aprire una InfoWindow

anchor optional
Tipo:  MVCObject|AdvancedMarkerView optional
L'ancoraggio a cui verrà posizionata questa InfoWindow. Se l'ancoraggio non è null, l'infoWindow sarà posizionata in alto al centro dell'ancoraggio. Il riquadro InfoWindow verrà visualizzato sulla stessa mappa o panoramica sulla pagina di ancoraggio (se disponibile).
map optional
Tipo:  Map|StreetViewPanorama optional
La mappa o il panorama su cui eseguire il rendering di questa InfoWindow.
shouldFocus optional
Tipo:  boolean optional
Indica se spostare o meno lo stato attivo all'interno di InfoWindow quando viene aperto. Se questa proprietà non è impostata o viene impostata su null o undefined, viene utilizzata un'euristica per decidere se spostare lo stato attivo o meno. Ti consigliamo di impostare esplicitamente questa proprietà in base alle tue esigenze, in quanto l'euristica è soggetta a modifiche e potrebbe non funzionare correttamente in tutti i casi d'uso.