3D Maps

Classe Map3DElement

Classe google.maps.maps3d.Map3DElement

Map3DElement è un'interfaccia HTML per la visualizzazione della mappa 3D. Tieni presente che è necessario impostare mode per avviare il rendering della mappa 3D.

Elemento personalizzato:
<gmp-map-3d center="lat,lng,altitude" default-ui-hidden description="string" gesture-handling="auto" heading="number" internal-usage-attribution-ids="id1 id2" map-id="string" max-altitude="number" max-heading="number" max-tilt="number" min-altitude="number" min-heading="number" min-tilt="number" mode="hybrid" range="number" roll="number" tilt="number" default-ui-disabled></gmp-map-3d>

Questa classe estende HTMLElement.

Questa classe implementa Map3DElementOptions.

Accedi chiamando il numero const {Map3DElement} = await google.maps.importLibrary("maps3d").
Consulta Librerie nell'API Maps JavaScript.

Map3DElement
Map3DElement([options])
Parametri: 
bounds
Se impostato, limita la posizione della fotocamera entro i limiti di latitudine/longitudine specificati. Tieni presente che gli oggetti al di fuori dei limiti vengono comunque visualizzati. I limiti possono limitare sia la longitudine che la latitudine o solo una delle due. Per i limiti solo di latitudine, utilizza le longitudini ovest ed est rispettivamente di -180 e 180. Per i limiti solo di longitudine, utilizza rispettivamente le latitudini nord e sud di 90 e -90.
center
Il centro della mappa fornito come LatLngAltitude, dove l'altitudine è espressa in metri sopra il livello del suolo. Tieni presente che non si tratta necessariamente della posizione della fotocamera, poiché il campo range influisce sulla distanza della fotocamera dal centro della mappa. Se non viene impostato, il valore predefinito è {lat: 0, lng: 0, altitude: 63170000}. 63.170.000 metri è l'altitudine massima consentita (raggio della Terra moltiplicato per 10).
Attributo HTML:
  • <gmp-map-3d center="lat,lng,altitude"></gmp-map-3d>
defaultUIHidden
Tipo:  boolean optional
Valore predefinito: false
Quando true, tutti i pulsanti predefiniti della UI sono nascosti.
Attributo HTML:
  • <gmp-map-3d default-ui-hidden></gmp-map-3d>
description
Tipo:  string optional
Se fornita, alla mappa verrà aggiunta una descrizione per l'accessibilità (ad es. per l'utilizzo con screen reader) con il valore fornito.
Attributo HTML:
  • <gmp-map-3d description="string"></gmp-map-3d>
gestureHandling
Tipo:  GestureHandling optional
Valore predefinito: GestureHandling.GREEDY
Controlla la gestione dei gesti cooperativi. Se impostato su COOPERATIVE, per scorrere la mappa sono necessari tasti di modifica o gesti con due dita. Se impostato su GREEDY, non è possibile scorrere la pagina host dagli eventi utente sull'elemento mappa. Se impostato su AUTO, la gestione dei gesti è determinata dalla possibilità di scorrimento della pagina host.
Attributo HTML:
  • <gmp-map-3d gesture-handling="auto"></gmp-map-3d>
  • <gmp-map-3d gesture-handling="cooperative"></gmp-map-3d>
  • <gmp-map-3d gesture-handling="greedy"></gmp-map-3d>
heading
Tipo:  number optional
La direzione della bussola della mappa, in gradi, dove il nord è zero. In assenza di inclinazione, qualsiasi rollio verrà interpretato come direzione.
Attributo HTML:
  • <gmp-map-3d heading="number"></gmp-map-3d>
internalUsageAttributionIds
Tipo:  Iterable<string> optional
Aggiunge un ID di attribuzione dell'utilizzo all'inizializzatore, che aiuta Google a capire quali librerie ed esempi sono utili per gli sviluppatori, ad esempio l'utilizzo di una libreria di raggruppamento di indicatori. Per disattivare l'invio dell'ID di attribuzione dell'utilizzo, puoi eliminare questa proprietà in sicurezza. Verranno inviati solo valori univoci. Le modifiche a questo valore dopo l'inizializzazione potrebbero essere ignorate.
Attributo HTML:
  • <gmp-map-3d internal-usage-attribution-ids="id1 id2"></gmp-map-3d>
language
Tipo:  string optional
La lingua in cui tentare di visualizzare la lingua della mappa base. Per impostazione predefinita, verrà utilizzata la lingua richiesta dallo sviluppatore durante il caricamento dell'API Maps JS.
mapId
Tipo:  string optional
Specifica un ID mappa che verrà utilizzato per recuperare lo stile di mappa basato su cloud per la mappa. Questo valore non deve essere impostato dopo l'inizializzazione della mappa. Pertanto, ci assicuriamo che l'ID mappa venga impostato solo durante l'inizializzazione e non pubblichiamo questo attributo sui canali rivolti al pubblico.
Attributo HTML:
  • <gmp-map-3d map-id="string"></gmp-map-3d>
maxAltitude
Tipo:  number optional
L'altitudine massima dal suolo che verrà visualizzata sulla mappa. Un valore valido è compreso tra 0 e 63170000 metri (raggio della Terra moltiplicato per 10).
Attributo HTML:
  • <gmp-map-3d max-altitude="number"></gmp-map-3d>
maxHeading
Tipo:  number optional
L'angolo massimo di orientamento (rotazione) della mappa. Un valore valido è compreso tra 0 e 360 gradi. minHeading e maxHeading rappresentano un intervallo di <= 360 gradi in cui saranno consentiti i movimenti della testa. minHeading = 180 e maxHeading = 90 consentiranno l'intestazione in [0, 90] e l'intestazione in [180, 360]. minHeading = 90 e maxHeading = 180 consentiranno l'intestazione in [90, 180].
Attributo HTML:
  • <gmp-map-3d max-heading="number"></gmp-map-3d>
maxTilt
Tipo:  number optional
L'angolo di incidenza massimo della mappa. Un valore valido è compreso tra 0 e 90 gradi.
Attributo HTML:
  • <gmp-map-3d max-tilt="number"></gmp-map-3d>
minAltitude
Tipo:  number optional
L'altitudine minima dal suolo che verrà visualizzata sulla mappa. Un valore valido è compreso tra 0 e 63170000 metri (raggio della Terra moltiplicato per 10).
Attributo HTML:
  • <gmp-map-3d min-altitude="number"></gmp-map-3d>
minHeading
Tipo:  number optional
L'angolo minimo di direzione (rotazione) della mappa. Un valore valido è compreso tra 0 e 360 gradi. minHeading e maxHeading rappresentano un intervallo di <= 360 gradi in cui saranno consentiti i movimenti della testa. minHeading = 180 e maxHeading = 90 consentiranno l'intestazione in [0, 90] e l'intestazione in [180, 360]. minHeading = 90 e maxHeading = 180 consentiranno l'intestazione in [90, 180].
Attributo HTML:
  • <gmp-map-3d min-heading="number"></gmp-map-3d>
minTilt
Tipo:  number optional
L'angolo di incidenza minimo della mappa. Un valore valido è compreso tra 0 e 90 gradi.
Attributo HTML:
  • <gmp-map-3d min-tilt="number"></gmp-map-3d>
mode
Tipo:  MapMode optional
Specifica una modalità in cui deve essere visualizzata la mappa. Se non viene impostato, la mappa non verrà visualizzata.
Attributo HTML:
  • <gmp-map-3d mode="hybrid"></gmp-map-3d>
  • <gmp-map-3d mode="satellite"></gmp-map-3d>
range
Tipo:  number optional
La distanza dalla fotocamera al centro della mappa, in metri.
Attributo HTML:
  • <gmp-map-3d range="number"></gmp-map-3d>
region
Tipo:  string optional
Regione con cui tentare di eseguire il rendering dei PDI della mappa base. Per impostazione predefinita, verrà utilizzata la regione richiesta dallo sviluppatore durante il caricamento dell'API Maps JS.
roll
Tipo:  number optional
Il rollio della fotocamera attorno al vettore di visualizzazione in gradi. Per risolvere le ambiguità, quando non è presente un'inclinazione, qualsiasi rollio verrà interpretato come direzione.
Attributo HTML:
  • <gmp-map-3d roll="number"></gmp-map-3d>
tilt
Tipo:  number optional
L'inclinazione del vettore di visualizzazione della videocamera in gradi. Un vettore di visualizzazione che guarda direttamente verso la Terra avrebbe un'inclinazione di zero gradi. Un vettore di visualizzazione che punta lontano dalla Terra avrebbe un'inclinazione di 180 gradi.
Attributo HTML:
  • <gmp-map-3d tilt="number"></gmp-map-3d>
defaultUIDisabled
Tipo:  boolean optional
Valore predefinito: false
Se true, tutti i pulsanti predefiniti della UI sono disattivati. Non disattiva i controlli della tastiera e dei gesti.
Attributo HTML:
  • <gmp-map-3d default-ui-disabled></gmp-map-3d>
addEventListener
addEventListener(type, listener[, options])
Parametri: 
  • type:  string una stringa sensibile alle maiuscole che rappresenta il tipo di evento da ascoltare.
  • listener:  EventListener|EventListenerObject l'oggetto che riceve una notifica. Deve essere una funzione o un oggetto con il metodo handleEvent
  • options:  boolean|AddEventListenerOptions optional vedi le opzioni. Gli eventi personalizzati supportano solo capture e passive.
Valore restituito:  void
Configura una funzione che verrà chiamata ogni volta che l'evento specificato viene inviato alla destinazione. Consulta addEventListener.
flyCameraAround
flyCameraAround(options)
Parametri: 
Valore restituito: nessuno
Questo metodo fa ruotare la videocamera attorno a una determinata località per una durata specifica. L'animazione può essere ripetuta per il numero di volte FlyAroundAnimationOptions.repeatCount specificato.

La videocamera si muoverà in senso orario.

Il metodo è asincrono perché le animazioni possono iniziare solo dopo che la mappa ha caricato una quantità minima di dati. Il metodo restituisce un valore una volta avviata l'animazione.

Se il numero di volte FlyAroundAnimationOptions.repeatCount è zero, non si verificherà alcuna rotazione e l'animazione verrà completata immediatamente dopo l'avvio.
flyCameraTo
flyCameraTo(options)
Parametri: 
Valore restituito: nessuno
Questo metodo sposta la fotocamera in modo parabolico dalla posizione corrente a una posizione finale specificata per una durata specificata.

Il metodo è asincrono perché le animazioni possono iniziare solo dopo che la mappa ha caricato una quantità minima di dati. Il metodo restituisce un valore una volta avviata l'animazione.
removeEventListener
removeEventListener(type, listener[, options])
Parametri: 
Valore restituito:  void
Rimuove dal target un listener di eventi precedentemente registrato con addEventListener. Consulta removeEventListener.
stopCameraAnimation
stopCameraAnimation()
Parametri: nessuno
Valore restituito: nessuno
Questo metodo interrompe qualsiasi animazione di volo eventualmente in esecuzione. La videocamera rimane nella posizione in cui si trova a metà animazione e non si teletrasporta al punto finale.

Il metodo è asincrono perché le animazioni possono iniziare o interrompersi solo dopo che la mappa ha caricato una quantità minima di dati. Il metodo restituisce un valore una volta interrotta l'animazione.
gmp-animationend
function(animationEndEvent)
Argomenti: 
  • animationEndEvent:  Event
Questo evento viene attivato al termine dell'animazione di volo. Questo evento si propaga verso l'alto nell'albero DOM.
gmp-centerchange
function(centerChangeEvent)
Argomenti: 
  • centerChangeEvent:  Event
Questo evento viene attivato quando la proprietà center di Map3DElement cambia.
gmp-click
function(clickEvent)
Argomenti: 
Questo evento viene attivato quando si fa clic sull'elemento Map3DElement.
gmp-error
function(mapInitializationErrorEvent)
Argomenti: 
  • mapInitializationErrorEvent:  Event
Questo evento viene attivato quando l'inizializzazione della mappa non va a buon fine.
gmp-headingchange
function(headingChangeEvent)
Argomenti: 
  • headingChangeEvent:  Event
Questo evento viene attivato quando la proprietà heading di Map3DElement cambia.
gmp-map-id-error
function(mapIdErrorEvent)
Argomenti: 
  • mapIdErrorEvent:  Event
Questo evento viene attivato quando la proprietà mapId di Map3DElement non è valida.
gmp-rangechange
function(rangeChangeEvent)
Argomenti: 
  • rangeChangeEvent:  Event
Questo evento viene attivato quando la proprietà range di Map3DElement cambia.
gmp-rollchange
function(rollChangeEvent)
Argomenti: 
  • rollChangeEvent:  Event
Questo evento viene attivato quando la proprietà roll di Map3DElement cambia.
gmp-steadychange
function(steadyChangeEvent)
Argomenti: 
Questo evento viene attivato quando lo stato stabile di Map3DElement cambia.
gmp-tiltchange
function(tiltChangeEvent)
Argomenti: 
  • tiltChangeEvent:  Event
Questo evento viene attivato quando la proprietà tilt di Map3DElement cambia.

Interfaccia Map3DElementOptions

Interfaccia google.maps.maps3d.Map3DElementOptions

Oggetto Map3DElementOptions utilizzato per definire le proprietà che possono essere impostate su un Map3DElement.

bounds optional
center optional
defaultUIDisabled optional
Tipo:  boolean optional
defaultUIHidden optional
Tipo:  boolean optional
description optional
Tipo:  string optional
gestureHandling optional
Tipo:  GestureHandling optional
heading optional
Tipo:  number optional
internalUsageAttributionIds optional
Tipo:  Iterable<string> optional
language optional
Tipo:  string optional
mapId optional
Tipo:  string optional
maxAltitude optional
Tipo:  number optional
maxHeading optional
Tipo:  number optional
maxTilt optional
Tipo:  number optional
minAltitude optional
Tipo:  number optional
minHeading optional
Tipo:  number optional
minTilt optional
Tipo:  number optional
mode optional
Tipo:  MapMode optional
range optional
Tipo:  number optional
region optional
Tipo:  string optional
roll optional
Tipo:  number optional
tilt optional
Tipo:  number optional

Costanti MapMode

Costanti google.maps.maps3d.MapMode

Specifica una modalità in cui deve essere visualizzata la mappa.

Accedi chiamando il numero const {MapMode} = await google.maps.importLibrary("maps3d").
Consulta Librerie nell'API Maps JavaScript.

HYBRID Questa modalità mappa mostra un livello trasparente delle strade principali su immagini satellitari o fotorealistiche.
SATELLITE Questa modalità mappa mostra immagini satellitari o fotorealistiche, se disponibili.

Costanti GestureHandling

Costanti google.maps.maps3d.GestureHandling

Specifica come devono essere gestiti gli eventi di gesto sull'elemento mappa.

Accedi chiamando il numero const {GestureHandling} = await google.maps.importLibrary("maps3d").
Consulta Librerie nell'API Maps JavaScript.

AUTO In questo modo, la mappa può scegliere se utilizzare la gestione dei gesti cooperativa o greedy. Questo è il comportamento predefinito se non viene specificato.

In questo modo, la mappa entrerà in modalità cooperativa se domina l'elemento padre di scorrimento (di solito la pagina host) al punto che l'utente non può scorrere dalla mappa ad altri contenuti.
COOPERATIVE In questo modo viene forzata la modalità cooperativa, in cui sono necessari tasti di modifica o gesti con due dita per scorrere la mappa.
GREEDY In questo modo viene forzata la modalità greedy, in cui non è possibile scorrere la pagina host dagli eventi utente sull'elemento mappa.

Interfaccia FlyAroundAnimationOptions

Interfaccia google.maps.maps3d.FlyAroundAnimationOptions

Opzioni di personalizzazione per l'animazione FlyCameraAround.

camera
Il punto centrale verso cui deve essere rivolta la videocamera durante l'animazione dell'orbita. Tieni presente che l'intestazione della mappa cambierà man mano che la videocamera orbita attorno a questo punto centrale.
durationMillis optional
Tipo:  number optional
La durata di un ciclo di animazione in millisecondi.
repeatCount optional
Tipo:  number optional
Specifica il numero di volte in cui un'animazione deve essere ripetuta. Se il numero è zero, l'animazione verrà completata immediatamente dopo l'inizio.
rounds optional
Tipo:  number optional
Il numero di giri da compiere intorno al centro nella durata specificata. Controlla la velocità complessiva della rotazione. Se passi un numero negativo a rounds, la videocamera ruoterà in senso antiorario anziché in senso orario, come avviene per impostazione predefinita.

Interfaccia FlyToAnimationOptions

Interfaccia google.maps.maps3d.FlyToAnimationOptions

Opzioni di personalizzazione per l'animazione FlyCameraTo.

endCamera
La posizione verso cui deve puntare la fotocamera alla fine dell'animazione.
durationMillis optional
Tipo:  number optional
La durata dell'animazione in millisecondi. Una durata pari a 0 teletrasporterà la videocamera direttamente alla posizione finale.

Interfaccia CameraOptions

Interfaccia google.maps.maps3d.CameraOptions

Oggetto CameraOptions utilizzato per definire le proprietà che possono essere impostate su un oggetto Camera. L'oggetto fotocamera può essere qualsiasi elemento che abbia una posizione della fotocamera, ad esempio uno stato della mappa corrente o uno stato di animazione richiesto futuro.

center optional
heading optional
Tipo:  number optional
range optional
Tipo:  number optional
roll optional
Tipo:  number optional
tilt optional
Tipo:  number optional

Classe SteadyChangeEvent

Classe google.maps.maps3d.SteadyChangeEvent

Questo evento viene creato dal monitoraggio di uno stato stabile di Map3DElement. Questo evento si propaga verso l'alto nell'albero DOM.

Questa classe estende Event.

Accedi chiamando il numero const {SteadyChangeEvent} = await google.maps.importLibrary("maps3d").
Consulta Librerie nell'API Maps JavaScript.

isSteady
Tipo:  boolean
Indica se Map3DElement è stabile (ovvero se tutto il rendering della scena corrente è stato completato) o meno.

Classe LocationClickEvent

Classe google.maps.maps3d.LocationClickEvent

Questo evento viene creato facendo clic su un elemento Map3DElement.

Questa classe estende Event.

Accedi chiamando il numero const {LocationClickEvent} = await google.maps.importLibrary("maps3d").
Consulta Librerie nell'API Maps JavaScript.

position
Tipo:  LatLngAltitude optional
La latitudine/longitudine/altitudine che si trovava sotto il cursore quando si è verificato l'evento. Tieni presente che, a livelli più generici, verranno restituiti dati meno precisi. Inoltre, quando si fa clic sulla superficie dell'acqua da posizioni della fotocamera più elevate, potrebbe essere restituita l'altitudine del fondale marino. Questo evento si propaga verso l'alto nell'albero DOM.

Classe PlaceClickEvent

Classe google.maps.maps3d.PlaceClickEvent

Questo evento viene creato facendo clic sull'icona di un luogo su un Map3DElement. Per impedire la visualizzazione del popover predefinito, chiama il metodo preventDefault() su questo evento per impedirne la gestione da parte di Map3DElement.

Questa classe estende LocationClickEvent.

Accedi chiamando il numero const {PlaceClickEvent} = await google.maps.importLibrary("maps3d").
Consulta Librerie nell'API Maps JavaScript.

placeId
Tipo:  string
L'ID luogo della caratteristica della mappa.
Ereditato: position
fetchPlace
fetchPlace()
Parametri: nessuno
Valore restituito:  Promise<Place>
Recupera un Place per questo ID luogo. Nell'oggetto Place risultante, verrà compilata la proprietà id. In seguito, è possibile richiedere campi aggiuntivi tramite Place.fetchFields(), in base alla normale attivazione e fatturazione dell'API Places. La promessa viene rifiutata se si è verificato un errore durante il recupero di Place.