3D Maps

Classe Map3DElement

google.maps.maps3d.Map3DElement class
extends HTMLElement
implements Map3DElementOptions
library "maps3d"

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

                  
<gmp-map-3d
  autofits-camera-animation="value-name"
  camera-position="lat,lng,altitude"
  center="lat,lng,altitude"
  default-ui-hidden
  description="string"
  fov="number"
  gesture-handling="value-name"
  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="value-name"
  range="number"
  roll="number"
  tilt="number">
</gmp-map-3d>

const {Map3DElement} = await google.maps.importLibrary("maps3d");

Costruttore
Map3DElement	Map3DElement([options]) Parametri: options: Map3DElementOptions optional

Proprietà
autofitsCameraAnimation attr: autofits-camera-animation	Avviso: disponibile solo nel canale v=alpha. Tipo di input: AutofitsCameraAnimation optional Tipo di output: AutofitsCameraAnimation optional Valore predefinito: none L'animazione da utilizzare per l'adattamento automatico della videocamera. Attributo HTML: autofits-camera-animation="value-name"
bounds	Tipo di input: LatLngBounds|LatLngBoundsLiteral optional Tipo di output: LatLngBounds optional 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.
cameraPosition attr: camera-position	Tipo di input: LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optional Tipo di output: LatLngAltitude optional La posizione della fotocamera indicata come LatLngAltitude. Se omesso, verrà derivato. Se center viene omesso, ma cameraPosition viene specificato, center verrà derivato da cameraPosition. Se entrambi vengono aggiornati nello stesso ciclo di esecuzione, verrà preferito cameraPosition. I campi cameraPosition e center possono essere derivati l'uno dall'altro in un rapporto uno a uno nel contesto di direzione, intervallo, rollio e inclinazione condivisi. Attributo HTML: camera-position="lat,lng,altitude"
center attr: center	Tipo di input: LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optional Tipo di output: LatLngAltitude optional Il centro della mappa fornito come LatLngAltitude, dove l'altitudine è espressa in metri sopra il livello medio del mare. 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: center="lat,lng,altitude"
defaultUIHidden attr: default-ui-hidden	Tipo di input: boolean optional Tipo di output: boolean Valore predefinito: false Quando true, tutti i pulsanti predefiniti della UI sono nascosti. Attributo HTML: default-ui-hidden
description attr: description	Tipo di input: string optional Tipo di output: 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: description="string"
fov attr: fov	Tipo di input: number optional Tipo di output: number optional Specifica il campo visivo verticale in gradi. I valori validi sono compresi tra 5,0 e 80,0. Valori più elevati aumentano l'area visibile, ma possono introdurre una distorsione della prospettiva. Valore predefinito: 35.0. Attributo HTML: fov="number"
gestureHandling attr: gesture-handling	Tipo di input: GestureHandling optional Tipo di output: GestureHandling 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: gesture-handling="value-name"
heading attr: heading	Tipo di input: number optional Tipo di output: 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: heading="number"
internalUsageAttributionIds attr: internal-usage-attribution-ids	Tipo di input: Iterable<string> optional Tipo di output: Array<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: internal-usage-attribution-ids="id1 id2"
language	Tipo di input: string optional Tipo di output: 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 attr: map-id	Tipo di input: string optional Tipo di output: string optional Specifica un ID mappa che verrà utilizzato per recuperare lo stile di mappa basato su cloud per la mappa. Attributo HTML: map-id="string"
maxAltitude attr: max-altitude	Tipo di input: number optional Tipo di output: 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: max-altitude="number"
maxHeading attr: max-heading	Tipo di input: number optional Tipo di output: 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: max-heading="number"
maxTilt attr: max-tilt	Tipo di input: number optional Tipo di output: number optional L'angolo di incidenza massimo della mappa. Un valore valido è compreso tra 0 e 90 gradi. Attributo HTML: max-tilt="number"
minAltitude attr: min-altitude	Tipo di input: number optional Tipo di output: 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: min-altitude="number"
minHeading attr: min-heading	Tipo di input: number optional Tipo di output: 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: min-heading="number"
minTilt attr: min-tilt	Tipo di input: number optional Tipo di output: number optional L'angolo di incidenza minimo della mappa. Un valore valido è compreso tra 0 e 90 gradi. Attributo HTML: min-tilt="number"
mode attr: mode	Tipo di input: MapMode optional Tipo di output: MapMode optional Specifica una modalità in cui deve essere visualizzata la mappa. Se non viene impostato, la mappa non verrà visualizzata. Attributo HTML: mode="value-name"
range attr: range	Tipo di input: number optional Tipo di output: number optional La distanza dalla fotocamera al centro della mappa, in metri. Attributo HTML: range="number"
region	Tipo di input: string optional Tipo di output: 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 attr: roll	Tipo di input: number optional Tipo di output: 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: roll="number"
tilt attr: tilt	Tipo di input: number optional Tipo di output: 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: tilt="number"
defaultUIDisabled attr: default-ui-disabled	Deprecato: utilizza Map3DElement.defaultUIHidden. Questa proprietà verrà rimossa in una release futura. 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: default-ui-disabled

Metodi
flyCameraAround	flyCameraAround(options) Parametri: options: FlyAroundAnimationOptions 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. La posizione attorno alla quale viene eseguita l'orbita viene specificata tramite CameraOptions.center. Questa è la località che verrà mostrata al centro dell'area visibile durante l'animazione di orbita, mentre la videocamera si sposta intorno. 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: options: FlyToAnimationOptions Valore restituito: nessuno Questo metodo sposta la fotocamera in modo parabolico dalla posizione corrente a una posizione finale specificata per una durata specificata. La posizione finale può essere specificata tramite CameraOptions.cameraPosition, che controlla la posizione esatta della fotocamera, o tramite CameraOptions.center, che controlla il centro dell'area visibile della mappa. 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.
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.
Ereditato: addEventListener, removeEventListener

Eventi
gmp-animationend	function(animationEndEvent) Argomenti: animationEndEvent: Event optional Questo evento viene attivato al termine dell'animazione di volo. Questo evento si propaga verso l'alto nell'albero DOM.
gmp-camerapositionchange	function(cameraPositionChangeEvent) Argomenti: cameraPositionChangeEvent: Event optional Questo evento viene attivato quando la proprietà cameraPosition di Map3DElement cambia.
gmp-centerchange	function(centerChangeEvent) Argomenti: centerChangeEvent: Event optional Questo evento viene attivato quando la proprietà center di Map3DElement cambia.
gmp-click	function(clickEvent) Argomenti: clickEvent: LocationClickEvent|PlaceClickEvent optional Questo evento viene attivato quando si fa clic sull'elemento Map3DElement.
gmp-error	function(mapInitializationErrorEvent) Argomenti: mapInitializationErrorEvent: Event optional Questo evento viene attivato quando l'inizializzazione della mappa non va a buon fine.
gmp-fovchange	function(fovChangeEvent) Argomenti: fovChangeEvent: Event optional Questo evento viene attivato quando la proprietà fov di Map3DElement cambia.
gmp-headingchange	function(headingChangeEvent) Argomenti: headingChangeEvent: Event optional Questo evento viene attivato quando la proprietà heading di Map3DElement cambia.
gmp-map-id-error	function(mapIdErrorEvent) Argomenti: mapIdErrorEvent: Event optional Questo evento viene attivato quando la proprietà mapId di Map3DElement non è valida.
gmp-rangechange	function(rangeChangeEvent) Argomenti: rangeChangeEvent: Event optional Questo evento viene attivato quando la proprietà range di Map3DElement cambia.
gmp-rollchange	function(rollChangeEvent) Argomenti: rollChangeEvent: Event optional Questo evento viene attivato quando la proprietà roll di Map3DElement cambia.
gmp-steadychange	function(steadyChangeEvent) Argomenti: steadyChangeEvent: SteadyChangeEvent optional Questo evento viene attivato quando lo stato stabile di Map3DElement cambia.
gmp-tiltchange	function(tiltChangeEvent) Argomenti: tiltChangeEvent: Event optional 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.

Proprietà
autofitsCameraAnimation facoltativo	Avviso: disponibile solo nel canale v=alpha. Tipo: AutofitsCameraAnimation optional Leggi i Map3DElement.autofitsCameraAnimation.
bounds facoltativo	Tipo: LatLngBounds|LatLngBoundsLiteral optional Leggi i Map3DElement.bounds.
cameraPosition facoltativo	Tipo: LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optional Leggi i Map3DElement.cameraPosition.
center facoltativo	Tipo: LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optional Leggi i Map3DElement.center.
defaultUIDisabled facoltativo	Deprecato: utilizza Map3DElement.defaultUIHidden. Questa proprietà verrà rimossa in una release futura. Tipo: boolean optional Leggi i Map3DElement.defaultUIDisabled.
defaultUIHidden facoltativo	Tipo: boolean optional Leggi i Map3DElement.defaultUIHidden.
description facoltativo	Tipo: string optional Leggi i Map3DElement.description.
fov facoltativo	Tipo: number optional Leggi i Map3DElement.fov.
gestureHandling facoltativo	Tipo: GestureHandling optional Leggi i Map3DElement.gestureHandling.
heading facoltativo	Tipo: number optional Leggi i Map3DElement.heading.
internalUsageAttributionIds facoltativo	Tipo: Iterable<string> optional Leggi i Map3DElement.internalUsageAttributionIds.
language facoltativo	Tipo: string optional Leggi i Map3DElement.language.
mapId facoltativo	Tipo: string optional Leggi i Map3DElement.mapId.
maxAltitude facoltativo	Tipo: number optional Leggi i Map3DElement.maxAltitude.
maxHeading facoltativo	Tipo: number optional Leggi i Map3DElement.maxHeading.
maxTilt facoltativo	Tipo: number optional Leggi i Map3DElement.maxTilt.
minAltitude facoltativo	Tipo: number optional Leggi i Map3DElement.minAltitude.
minHeading facoltativo	Tipo: number optional Leggi i Map3DElement.minHeading.
minTilt facoltativo	Tipo: number optional Leggi i Map3DElement.minTilt.
mode facoltativo	Tipo: MapMode optional Leggi i Map3DElement.mode.
range facoltativo	Tipo: number optional Leggi i Map3DElement.range.
region facoltativo	Tipo: string optional Leggi i Map3DElement.region.
roll facoltativo	Tipo: number optional Leggi i Map3DElement.roll.
tilt facoltativo	Tipo: number optional Leggi i Map3DElement.tilt.

Costanti MapMode

google.maps.maps3d.MapMode libreria di costanti
"maps3d"

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

Queste costanti sono utilizzabili anche come stringhe. In TypeScript, i valori letterali stringa sono definiti dal tipo MapModeString.

const {MapMode} = await google.maps.importLibrary("maps3d");

Costanti
HYBRID	Questa modalità mappa mostra un livello trasparente delle strade principali su immagini satellitari o fotorealistiche.
ROADMAP	Avviso: disponibile solo nel canale v=alpha. Questa modalità mappa mostra una normale mappa stradale.
SATELLITE	Questa modalità mappa mostra immagini satellitari o fotorealistiche, se disponibili.

Costanti GestureHandling

google.maps.maps3d.GestureHandling libreria di costanti
"maps3d"

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

Queste costanti sono utilizzabili anche come stringhe. In TypeScript, i valori letterali stringa sono definiti dal tipo GestureHandlingString.

const {GestureHandling} = await google.maps.importLibrary("maps3d");

Costanti
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.

Costanti AutofitsCameraAnimation

google.maps.maps3d.AutofitsCameraAnimation libreria di costanti
"maps3d"

Avviso: disponibile solo nel canale v=alpha.

Specifica il comportamento della videocamera quando si sposta in una nuova posizione per centrarsi in base agli elementi secondari attivati.

Queste costanti sono utilizzabili anche come stringhe. In TypeScript, i valori letterali stringa sono definiti dal tipo AutofitsCameraAnimationString.

const {AutofitsCameraAnimation} = await google.maps.importLibrary("maps3d");

Costanti
FLY_TO	Vola alla nuova posizione.
NONE	Si aggancia alla nuova posizione senza un'animazione.

Interfaccia FlyAroundAnimationOptions

Interfaccia google.maps.maps3d.FlyAroundAnimationOptions

Opzioni di personalizzazione per l'animazione FlyCameraAround.

Proprietà
camera	Tipo: CameraOptions 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 facoltativo	Tipo: number optional La durata di un ciclo di animazione in millisecondi.
repeatCount facoltativo	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. Se viene passato Number.Infinity, l'animazione verrà ripetuta all'infinito.
rounds facoltativo	Deprecato: utilizza FlyAroundAnimationOptions.repeatCount. 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.

Proprietà
endCamera	Tipo: CameraOptions La posizione verso cui deve puntare la fotocamera alla fine dell'animazione.
durationMillis facoltativo	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.

Proprietà
altitudeMode facoltativo	Tipo: AltitudeMode optional Valore predefinito: AltitudeMode.ABSOLUTE Un enum che specifica come interpretare il valore dell'altitudine dell'oggetto CameraOptions specificato. In questo modo viene riutilizzato l'enum AltitudeMode esistente.
cameraPosition facoltativo	Tipo: LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optional Leggi i Map3DElement.cameraPosition.
center facoltativo	Tipo: LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optional Leggi i Map3DElement.center.
fov facoltativo	Tipo: number optional Leggi i Map3DElement.fov.
heading facoltativo	Tipo: number optional Leggi i Map3DElement.heading.
range facoltativo	Tipo: number optional Leggi i Map3DElement.range.
roll facoltativo	Tipo: number optional Leggi i Map3DElement.roll.
tilt facoltativo	Tipo: number optional Leggi i Map3DElement.tilt.

Classe SteadyChangeEvent

google.maps.maps3d.SteadyChangeEvent class
extends Event
library "maps3d"

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

const {SteadyChangeEvent} = await google.maps.importLibrary("maps3d");

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

Classe LocationClickEvent

google.maps.maps3d.LocationClickEvent class
extends Event
library "maps3d"

Questo evento viene creato facendo clic su un elemento Map3DElement.

const {LocationClickEvent} = await google.maps.importLibrary("maps3d");

Proprietà

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

google.maps.maps3d.PlaceClickEvent class
extends LocationClickEvent
library "maps3d"

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.

const {PlaceClickEvent} = await google.maps.importLibrary("maps3d");

Proprietà
placeId	Tipo: string L'ID luogo della caratteristica della mappa.
Ereditato: position

Metodi

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.