Draw on the map

Classe Marker3DElement

Classe google.maps.maps3d.Marker3DElement

Mostra una posizione su una mappa 3D. Tieni presente che l'attributo position deve essere impostato affinché l'attributo Marker3DElement venga visualizzato.

Elemento personalizzato:
<gmp-marker-3d altitude-mode="absolute" collision-behavior="required" draws-when-occluded extruded label="string" position="lat,lng" size-preserved z-index="number"></gmp-marker-3d>

Questa classe estende HTMLElement.

Questa classe implementa Marker3DElementOptions.

Accedi chiamando il numero const {Marker3DElement} = await google.maps.importLibrary("maps3d").
Consulta Librerie nell'API Maps JavaScript.
Marker3DElement
Marker3DElement([options])
Parametri: 
Crea un Marker3DElement con le opzioni specificate.
altitudeMode
Tipo:  AltitudeMode optional
Valore predefinito: AltitudeMode.CLAMP_TO_GROUND
Specifica come viene interpretato il componente di altitudine della posizione.
Attributo HTML:
  • <gmp-marker-3d altitude-mode="absolute"></gmp-marker-3d>
  • <gmp-marker-3d altitude-mode="clamp-to-ground"></gmp-marker-3d>
  • <gmp-marker-3d altitude-mode="relative-to-ground"></gmp-marker-3d>
  • <gmp-marker-3d altitude-mode="relative-to-mesh"></gmp-marker-3d>
collisionBehavior
Tipo:  CollisionBehavior optional
Valore predefinito: CollisionBehavior.REQUIRED
Un'enumerazione che specifica il comportamento di un Marker3DElement quando entra in collisione con un altro Marker3DElement o con le etichette della mappa base.
Attributo HTML:
  • <gmp-marker-3d collision-behavior="required"></gmp-marker-3d>
  • <gmp-marker-3d collision-behavior="required-and-hides-optional"></gmp-marker-3d>
  • <gmp-marker-3d collision-behavior="optional-and-hides-lower-priority"></gmp-marker-3d>
drawsWhenOccluded
Tipo:  boolean optional
Valore predefinito: false
Specifica se questo indicatore deve essere disegnato o meno quando è nascosto. Il segnaposto può essere nascosto dalla geometria della mappa (ad es. edifici).
Attributo HTML:
  • <gmp-marker-3d draws-when-occluded></gmp-marker-3d>
extruded
Tipo:  boolean optional
Valore predefinito: false
Specifica se collegare l'indicatore al suolo. Per estrudere un indicatore, altitudeMode deve essere RELATIVE_TO_GROUND o ABSOLUTE.
Attributo HTML:
  • <gmp-marker-3d extruded></gmp-marker-3d>
label
Tipo:  string optional
Testo da visualizzare con questo indicatore.
Attributo HTML:
  • <gmp-marker-3d label="string"></gmp-marker-3d>
position
La posizione della punta dell'indicatore. L'altitudine viene ignorata in determinate modalità ed è quindi facoltativa.
Attributo HTML:
  • <gmp-marker-3d position="lat,lng"></gmp-marker-3d>
  • <gmp-marker-3d position="lat,lng,altitude"></gmp-marker-3d>
sizePreserved
Tipo:  boolean optional
Valore predefinito: false
Specifica se questo indicatore deve mantenere le sue dimensioni o meno, indipendentemente dalla distanza dalla videocamera. Per impostazione predefinita, l'indicatore viene ridimensionato in base alla distanza dalla videocamera/all'inclinazione.
Attributo HTML:
  • <gmp-marker-3d size-preserved></gmp-marker-3d>
zIndex
Tipo:  number optional
Lo zIndex rispetto ad altri indicatori.
Attributo HTML:
  • <gmp-marker-3d z-index="number"></gmp-marker-3d>
default
Tutti gli elementi personalizzati aggiunti direttamente a Marker3DElement verranno inseriti, ma solo gli elementi di tipo HTMLImageElement, SVGElement e PinElement verranno utilizzati per disegnare gli indicatori, mentre gli altri elementi verranno ignorati.
HTMLImageElement e SVGElement devono essere inseriti nell'elemento <template> prima di essere assegnati allo slot predefinito di Marker3DElement.

Al momento, le immagini e gli SVG vengono rasterizzati prima di essere visualizzati nella scena 3D, pertanto l'HTML personalizzato incorporato nelle classi SVG o CSS aggiunte alle immagini non verrà applicato e potrebbe non essere riflesso quando gli indicatori vengono visualizzati sullo schermo.
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.
removeEventListener
removeEventListener(type, listener[, options])
Parametri: 
Valore restituito:  void
Rimuove dal target un listener di eventi precedentemente registrato con addEventListener. Consulta removeEventListener.

Interfaccia Marker3DElementOptions

Interfaccia google.maps.maps3d.Marker3DElementOptions

Oggetto Marker3DElementOptions utilizzato per definire le proprietà che possono essere impostate su un Marker3DElement.
altitudeMode optional
Tipo:  AltitudeMode optional
Leggi i Marker3DElement.altitudeMode.
collisionBehavior optional
Tipo:  CollisionBehavior optional
Leggi i Marker3DElement.collisionBehavior.
drawsWhenOccluded optional
Tipo:  boolean optional
Leggi i Marker3DElement.drawsWhenOccluded.
extruded optional
Tipo:  boolean optional
Leggi i Marker3DElement.extruded.
label optional
Tipo:  string optional
Leggi i Marker3DElement.label.
position optional
Leggi i Marker3DElement.position.
sizePreserved optional
Tipo:  boolean optional
Leggi i Marker3DElement.sizePreserved.
zIndex optional
Tipo:  number optional
Leggi i Marker3DElement.zIndex.

Classe Marker3DInteractiveElement

Classe google.maps.maps3d.Marker3DInteractiveElement

Mostra una posizione su una mappa 3D. Tieni presente che l'attributo position deve essere impostato affinché l'attributo Marker3DInteractiveElement venga visualizzato. A differenza di Marker3DElement, Marker3DInteractiveElement riceve un evento gmp-click.

Elemento personalizzato:
<gmp-marker-3d-interactive gmp-popover-target="popover-id" title="string"></gmp-marker-3d-interactive>

Questa classe estende Marker3DElement.

Questa classe implementa Marker3DInteractiveElementOptions.

Accedi chiamando il numero const {Marker3DInteractiveElement} = await google.maps.importLibrary("maps3d").
Consulta Librerie nell'API Maps JavaScript.
Marker3DInteractiveElement
Marker3DInteractiveElement([options])
Parametri: 
Crea un Marker3DInteractiveElement con le opzioni specificate.
gmpPopoverTargetElement
Tipo:  PopoverElement optional
Se impostato, l'elemento popover verrà aperto al clic su questo indicatore.
Attributo HTML:
  • <gmp-marker-3d-interactive gmp-popover-target="popover-id"></gmp-marker-3d-interactive>
title
Tipo:  string
Testo di rollover. Se fornito, un testo di accessibilità (ad es. da utilizzare con gli screen reader) verrà aggiunto a Marker3DInteractiveElement con il valore fornito.
Attributo HTML:
  • <gmp-marker-3d-interactive title="string"></gmp-marker-3d-interactive>
Ereditate: altitudeMode, collisionBehavior, drawsWhenOccluded, extruded, label, position, sizePreserved, zIndex
default
Tutti gli elementi personalizzati aggiunti direttamente a Marker3DInteractiveElement verranno inseriti, ma solo gli elementi di tipo PinElement verranno utilizzati per disegnare gli indicatori, mentre gli altri elementi verranno ignorati.
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.
removeEventListener
removeEventListener(type, listener[, options])
Parametri: 
Valore restituito:  void
Rimuove dal target un listener di eventi precedentemente registrato con addEventListener. Consulta removeEventListener.
gmp-click
function(clickEvent)
Argomenti: 
Questo evento viene attivato quando si fa clic sull'elemento Marker3DInteractiveElement.

Interfaccia Marker3DInteractiveElementOptions

Interfaccia google.maps.maps3d.Marker3DInteractiveElementOptions

Oggetto Marker3DInteractiveElementOptions utilizzato per definire le proprietà che possono essere impostate su un Marker3DInteractiveElement.

Questa interfaccia estende Marker3DElementOptions.

gmpPopoverTargetElement optional
Tipo:  PopoverElement optional
Leggi i Marker3DInteractiveElement.gmpPopoverTargetElement.
title optional
Tipo:  string optional
Leggi i Marker3DInteractiveElement.title.
Ereditate: altitudeMode, collisionBehavior, drawsWhenOccluded, extruded, label, position, sizePreserved, zIndex

Classe Model3DElement

Classe google.maps.maps3d.Model3DElement

Un modello 3D che consente il rendering dei modelli gLTF. Tieni presente che position e src devono essere impostati per la visualizzazione di Model3DElement.

Le proprietà principali di gLTF PBR devono essere supportate. Al momento non sono supportate estensioni o proprietà delle estensioni.

Elemento personalizzato:
<gmp-model-3d altitude-mode="absolute" orientation="heading,tilt,roll" position="lat,lng" scale="number" src="url"></gmp-model-3d>

Questa classe estende HTMLElement.

Questa classe implementa Model3DElementOptions.

Accedi chiamando il numero const {Model3DElement} = await google.maps.importLibrary("maps3d").
Consulta Librerie nell'API Maps JavaScript.
Model3DElement
Model3DElement([options])
Parametri: 
Crea un Model3DElement con le opzioni specificate.
altitudeMode
Tipo:  AltitudeMode optional
Valore predefinito: AltitudeMode.CLAMP_TO_GROUND
Specifica come viene interpretata l'altitudine nella posizione.
Attributo HTML:
  • <gmp-model-3d altitude-mode="absolute"></gmp-model-3d>
  • <gmp-model-3d altitude-mode="clamp-to-ground"></gmp-model-3d>
  • <gmp-model-3d altitude-mode="relative-to-ground"></gmp-model-3d>
  • <gmp-model-3d altitude-mode="relative-to-mesh"></gmp-model-3d>
orientation
Descrive la rotazione del sistema di coordinate di un modello 3D per posizionarlo sulla mappa 3D.

Le rotazioni vengono applicate al modello nel seguente ordine: rollio, inclinazione e direzione.
Attributo HTML:
  • <gmp-model-3d orientation="heading,tilt,roll"></gmp-model-3d>
position
Imposta la posizione di Model3DElement. L'altitudine viene ignorata in determinate modalità ed è quindi facoltativa.
Attributo HTML:
  • <gmp-model-3d position="lat,lng"></gmp-model-3d>
  • <gmp-model-3d position="lat,lng,altitude"></gmp-model-3d>
scale
Tipo:  number|Vector3D|Vector3DLiteral optional
Valore predefinito: 1
Scala il modello lungo gli assi x, y e z nello spazio delle coordinate del modello.
Attributo HTML:
  • <gmp-model-3d scale="number"></gmp-model-3d>
  • <gmp-model-3d scale="x,y,z"></gmp-model-3d>
src
Tipo:  string|URL optional
Specifica l'URL del modello 3D. Al momento sono supportati solo i modelli nel formato .glb.

Eventuali URL HTTP relativi verranno risolti nei corrispondenti URL assoluti.

Tieni presente che se ospiti i file del modello .glb su un sito web o un server diverso dalla tua applicazione principale, devi configurare le intestazioni HTTP CORS corrette. In questo modo, l'applicazione può accedere in modo sicuro ai file del modello dall'altro dominio.
Attributo HTML:
  • <gmp-model-3d src="url"></gmp-model-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.
removeEventListener
removeEventListener(type, listener[, options])
Parametri: 
Valore restituito:  void
Rimuove dal target un listener di eventi precedentemente registrato con addEventListener. Consulta removeEventListener.

Interfaccia Model3DElementOptions

Interfaccia google.maps.maps3d.Model3DElementOptions

Oggetto Model3DElementOptions utilizzato per definire le proprietà che possono essere impostate su un Model3DElement.
altitudeMode optional
Tipo:  AltitudeMode optional
Leggi i Model3DElement.altitudeMode.
orientation optional
Leggi i Model3DElement.orientation.
position optional
Leggi i Model3DElement.position.
scale optional
Tipo:  number|Vector3D|Vector3DLiteral optional
Leggi i Model3DElement.scale.
src optional
Tipo:  string|URL optional
Leggi i Model3DElement.src.

Classe Model3DInteractiveElement

Classe google.maps.maps3d.Model3DInteractiveElement

Un modello 3D che consente il rendering dei modelli gLTF. Tieni presente che position e src devono essere impostati per la visualizzazione di Model3DElement.

Le proprietà principali di gLTF PBR devono essere supportate. Al momento non sono supportate estensioni o proprietà delle estensioni.

A differenza di Model3DElement, Model3DInteractiveElement riceve un evento gmp-click.

Elemento personalizzato:
<gmp-model-3d-interactive></gmp-model-3d-interactive>

Questa classe estende Model3DElement.

Questa classe implementa Model3DInteractiveElementOptions.

Accedi chiamando il numero const {Model3DInteractiveElement} = await google.maps.importLibrary("maps3d").
Consulta Librerie nell'API Maps JavaScript.
Model3DInteractiveElement
Model3DInteractiveElement([options])
Parametri: 
Crea un Model3DInteractiveElement con le opzioni specificate.
Ereditate: altitudeMode, orientation, position, scale, src
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.
removeEventListener
removeEventListener(type, listener[, options])
Parametri: 
Valore restituito:  void
Rimuove dal target un listener di eventi precedentemente registrato con addEventListener. Consulta removeEventListener.
gmp-click
function(clickEvent)
Argomenti: 
Questo evento viene attivato quando si fa clic sull'elemento Model3DInteractiveElement.

Interfaccia Model3DInteractiveElementOptions

Interfaccia google.maps.maps3d.Model3DInteractiveElementOptions

Oggetto Model3DInteractiveElementOptions utilizzato per definire le proprietà che possono essere impostate su un Model3DInteractiveElement.

Questa interfaccia estende Model3DElementOptions.

Ereditate: altitudeMode, orientation, position, scale, src

Classe Polyline3DElement

Classe google.maps.maps3d.Polyline3DElement

Una polilinea 3D è un overlay lineare di segmenti di linea collegati su una mappa 3D.

Elemento personalizzato:
<gmp-polyline-3d altitude-mode="absolute" draws-occluded-segments extruded geodesic outer-color="string" outer-width="number" path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..." stroke-color="string" stroke-width="number" z-index="number"></gmp-polyline-3d>

Questa classe estende HTMLElement.

Questa classe implementa Polyline3DElementOptions.

Accedi chiamando il numero const {Polyline3DElement} = await google.maps.importLibrary("maps3d").
Consulta Librerie nell'API Maps JavaScript.
Polyline3DElement
Polyline3DElement([options])
Parametri: 
Crea un Polyline3DElement con le opzioni specificate.
altitudeMode
Tipo:  AltitudeMode optional
Valore predefinito: AltitudeMode.CLAMP_TO_GROUND
Specifica il modo in cui vengono interpretati i componenti dell'altitudine nelle coordinate.
Attributo HTML:
  • <gmp-polyline-3d altitude-mode="absolute"></gmp-polyline-3d>
  • <gmp-polyline-3d altitude-mode="clamp-to-ground"></gmp-polyline-3d>
  • <gmp-polyline-3d altitude-mode="relative-to-ground"></gmp-polyline-3d>
  • <gmp-polyline-3d altitude-mode="relative-to-mesh"></gmp-polyline-3d>
drawsOccludedSegments
Tipo:  boolean optional
Valore predefinito: false
Specifica se le parti della polilinea che potrebbero essere nascoste vengono disegnate o meno. Le polilinee possono essere nascoste dalla geometria della mappa (ad es. gli edifici).
Attributo HTML:
  • <gmp-polyline-3d draws-occluded-segments></gmp-polyline-3d>
extruded
Tipo:  boolean optional
Valore predefinito: false
Specifica se collegare la polilinea al suolo. Per estrudere una polilinea, altitudeMode deve essere RELATIVE_TO_GROUND o ABSOLUTE.
Attributo HTML:
  • <gmp-polyline-3d extruded></gmp-polyline-3d>
geodesic
Tipo:  boolean optional
Valore predefinito: false
Se true, i bordi della polilinea vengono interpretati come geodetici e seguono la curvatura della Terra. Se false, i bordi della polilinea vengono visualizzati come linee rette nello spazio dello schermo.
Attributo HTML:
  • <gmp-polyline-3d geodesic></gmp-polyline-3d>
outerColor
Tipo:  string optional
Il colore esterno. Sono supportati tutti i colori CSS3.
Attributo HTML:
  • <gmp-polyline-3d outer-color="string"></gmp-polyline-3d>
outerWidth
Tipo:  number optional
La larghezza esterna è compresa tra 0.0 e 1.0. Si tratta di una percentuale di strokeWidth.
Attributo HTML:
  • <gmp-polyline-3d outer-width="number"></gmp-polyline-3d>
path
La sequenza ordinata di coordinate della polilinea. L'altitudine viene ignorata in determinate modalità ed è quindi facoltativa.
Attributo HTML:
  • <gmp-polyline-3d path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..."></gmp-polyline-3d>
strokeColor
Tipo:  string optional
Il colore del tratto. Sono supportati tutti i colori CSS3.
Attributo HTML:
  • <gmp-polyline-3d stroke-color="string"></gmp-polyline-3d>
strokeWidth
Tipo:  number optional
La larghezza del tratto in pixel.
Attributo HTML:
  • <gmp-polyline-3d stroke-width="number"></gmp-polyline-3d>
zIndex
Tipo:  number optional
Lo zIndex rispetto ad altri poligoni.
Attributo HTML:
  • <gmp-polyline-3d z-index="number"></gmp-polyline-3d>
coordinates
La sequenza ordinata di coordinate della polilinea. L'altitudine viene ignorata in determinate modalità ed è quindi facoltativa.
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.
removeEventListener
removeEventListener(type, listener[, options])
Parametri: 
Valore restituito:  void
Rimuove dal target un listener di eventi precedentemente registrato con addEventListener. Consulta removeEventListener.

Interfaccia Polyline3DElementOptions

Interfaccia google.maps.maps3d.Polyline3DElementOptions

Oggetto Polyline3DElementOptions utilizzato per definire le proprietà che possono essere impostate su un Polyline3DElement.
altitudeMode optional
Tipo:  AltitudeMode optional
Leggi i Polyline3DElement.altitudeMode.
coordinates optional
Leggi i Polyline3DElement.coordinates.
drawsOccludedSegments optional
Tipo:  boolean optional
Leggi i Polyline3DElement.drawsOccludedSegments.
extruded optional
Tipo:  boolean optional
Leggi i Polyline3DElement.extruded.
geodesic optional
Tipo:  boolean optional
Leggi i Polyline3DElement.geodesic.
outerColor optional
Tipo:  string optional
Leggi i Polyline3DElement.outerColor.
outerWidth optional
Tipo:  number optional
Leggi i Polyline3DElement.outerWidth.
strokeColor optional
Tipo:  string optional
Leggi i Polyline3DElement.strokeColor.
strokeWidth optional
Tipo:  number optional
Leggi i Polyline3DElement.strokeWidth.
zIndex optional
Tipo:  number optional
Leggi i Polyline3DElement.zIndex.

Classe Polyline3DInteractiveElement

Classe google.maps.maps3d.Polyline3DInteractiveElement

Una polilinea 3D è un overlay lineare di segmenti di linea collegati su una mappa 3D. A differenza di Polyline3DElement, Polyline3DInteractiveElement riceve un evento gmp-click.

Elemento personalizzato:
<gmp-polyline-3d-interactive></gmp-polyline-3d-interactive>

Questa classe estende Polyline3DElement.

Questa classe implementa Polyline3DInteractiveElementOptions.

Accedi chiamando il numero const {Polyline3DInteractiveElement} = await google.maps.importLibrary("maps3d").
Consulta Librerie nell'API Maps JavaScript.
Polyline3DInteractiveElement
Polyline3DInteractiveElement([options])
Parametri: 
Crea un Polyline3DInteractiveElement con le opzioni specificate.
Ereditato: altitudeMode, drawsOccludedSegments, extruded, geodesic, outerColor, outerWidth, path, strokeColor, strokeWidth, zIndex, coordinates
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.
removeEventListener
removeEventListener(type, listener[, options])
Parametri: 
Valore restituito:  void
Rimuove dal target un listener di eventi precedentemente registrato con addEventListener. Consulta removeEventListener.
gmp-click
function(clickEvent)
Argomenti: 
  • clickEvent:  LocationClickEvent l'oggetto evento conterrà la posizione di latitudine, longitudine e altitudine del clic.
Questo evento viene attivato quando si fa clic sull'elemento Polyline3DInteractiveElement.

Interfaccia Polyline3DInteractiveElementOptions

Interfaccia google.maps.maps3d.Polyline3DInteractiveElementOptions

Oggetto Polyline3DInteractiveElementOptions utilizzato per definire le proprietà che possono essere impostate su un Polyline3DInteractiveElement.

Questa interfaccia estende Polyline3DElementOptions.

Ereditato: altitudeMode, coordinates, drawsOccludedSegments, extruded, geodesic, outerColor, outerWidth, strokeColor, strokeWidth, zIndex

Classe Polygon3DElement

Classe google.maps.maps3d.Polygon3DElement

Un poligono 3D (come una polilinea 3D) definisce una serie di coordinate collegate in una sequenza ordinata. Inoltre, i poligoni formano un anello chiuso e definiscono una regione riempita.

Elemento personalizzato:
<gmp-polygon-3d altitude-mode="absolute" draws-occluded-segments extruded fill-color="string" geodesic path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..." stroke-color="string" stroke-width="number" z-index="number"></gmp-polygon-3d>

Questa classe estende HTMLElement.

Questa classe implementa Polygon3DElementOptions.

Accedi chiamando il numero const {Polygon3DElement} = await google.maps.importLibrary("maps3d").
Consulta Librerie nell'API Maps JavaScript.
Polygon3DElement
Polygon3DElement([options])
Parametri: 
Crea un Polygon3DElement con le opzioni specificate.
altitudeMode
Tipo:  AltitudeMode optional
Valore predefinito: AltitudeMode.CLAMP_TO_GROUND
Specifica il modo in cui vengono interpretati i componenti dell'altitudine nelle coordinate.
Attributo HTML:
  • <gmp-polygon-3d altitude-mode="absolute"></gmp-polygon-3d>
  • <gmp-polygon-3d altitude-mode="clamp-to-ground"></gmp-polygon-3d>
  • <gmp-polygon-3d altitude-mode="relative-to-ground"></gmp-polygon-3d>
  • <gmp-polygon-3d altitude-mode="relative-to-mesh"></gmp-polygon-3d>
drawsOccludedSegments
Tipo:  boolean optional
Valore predefinito: false
Specifica se le parti del poligono che potrebbero essere nascoste vengono disegnate o meno. I poligoni possono essere nascosti dalla geometria della mappa (ad es. edifici).
Attributo HTML:
  • <gmp-polygon-3d draws-occluded-segments></gmp-polygon-3d>
extruded
Tipo:  boolean optional
Valore predefinito: false
Specifica se collegare il poligono al suolo. Per estrudere un poligono, altitudeMode deve essere RELATIVE_TO_GROUND o ABSOLUTE.
Attributo HTML:
  • <gmp-polygon-3d extruded></gmp-polygon-3d>
fillColor
Tipo:  string optional
Il colore di riempimento. Sono supportati tutti i colori CSS3.
Attributo HTML:
  • <gmp-polygon-3d fill-color="string"></gmp-polygon-3d>
geodesic
Tipo:  boolean optional
Valore predefinito: false
Se true, i bordi del poligono vengono interpretati come geodetici e seguono la curvatura della Terra. Se false, i bordi del poligono vengono visualizzati come linee rette nello spazio dello schermo.
Attributo HTML:
  • <gmp-polygon-3d geodesic></gmp-polygon-3d>
innerPaths
La sequenza ordinata di coordinate che designa un loop chiuso. A differenza delle polilinee, un poligono può essere costituito da uno o più percorsi, che creano più ritagli all'interno del poligono.
path
La sequenza ordinata di coordinate che designa un loop chiuso. L'altitudine viene ignorata in determinate modalità ed è quindi facoltativa.
Attributo HTML:
  • <gmp-polygon-3d path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..."></gmp-polygon-3d>
strokeColor
Tipo:  string optional
Il colore del tratto. Sono supportati tutti i colori CSS3.
Attributo HTML:
  • <gmp-polygon-3d stroke-color="string"></gmp-polygon-3d>
strokeWidth
Tipo:  number optional
La larghezza del tratto in pixel.
Attributo HTML:
  • <gmp-polygon-3d stroke-width="number"></gmp-polygon-3d>
zIndex
Tipo:  number optional
Lo zIndex rispetto ad altri poligoni.
Attributo HTML:
  • <gmp-polygon-3d z-index="number"></gmp-polygon-3d>
outerCoordinates
La sequenza ordinata di coordinate che designa un loop chiuso. L'altitudine viene ignorata in determinate modalità ed è quindi facoltativa.
innerCoordinates
La sequenza ordinata di coordinate che designa un loop chiuso. A differenza delle polilinee, un poligono può essere costituito da uno o più percorsi, che creano più ritagli all'interno del poligono.
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.
removeEventListener
removeEventListener(type, listener[, options])
Parametri: 
Valore restituito:  void
Rimuove dal target un listener di eventi precedentemente registrato con addEventListener. Consulta removeEventListener.

Interfaccia Polygon3DElementOptions

Interfaccia google.maps.maps3d.Polygon3DElementOptions

Oggetto Polygon3DElementOptions utilizzato per definire le proprietà che possono essere impostate su un Polygon3DElement.
altitudeMode optional
Tipo:  AltitudeMode optional
Leggi i Polygon3DElement.altitudeMode.
drawsOccludedSegments optional
Tipo:  boolean optional
Leggi i Polygon3DElement.drawsOccludedSegments.
extruded optional
Tipo:  boolean optional
Leggi i Polygon3DElement.extruded.
fillColor optional
Tipo:  string optional
Leggi i Polygon3DElement.fillColor.
geodesic optional
Tipo:  boolean optional
Leggi i Polygon3DElement.geodesic.
innerCoordinates optional
Leggi i Polygon3DElement.innerCoordinates.
outerCoordinates optional
Leggi i Polygon3DElement.outerCoordinates.
strokeColor optional
Tipo:  string optional
Leggi i Polygon3DElement.strokeColor.
strokeWidth optional
Tipo:  number optional
Leggi i Polygon3DElement.strokeWidth.
zIndex optional
Tipo:  number optional
Leggi i Polygon3DElement.zIndex.

Classe Polygon3DInteractiveElement

Classe google.maps.maps3d.Polygon3DInteractiveElement

Un poligono 3D (come una polilinea 3D) definisce una serie di coordinate collegate in una sequenza ordinata. Inoltre, i poligoni formano un anello chiuso e definiscono una regione riempita. A differenza di Polygon3DElement, Polygon3DInteractiveElement riceve un evento gmp-click.

Elemento personalizzato:
<gmp-polygon-3d-interactive></gmp-polygon-3d-interactive>

Questa classe estende Polygon3DElement.

Questa classe implementa Polygon3DInteractiveElementOptions.

Accedi chiamando il numero const {Polygon3DInteractiveElement} = await google.maps.importLibrary("maps3d").
Consulta Librerie nell'API Maps JavaScript.
Polygon3DInteractiveElement
Polygon3DInteractiveElement([options])
Parametri: 
Crea un Polygon3DInteractiveElement con le opzioni specificate.
Ereditato: altitudeMode, drawsOccludedSegments, extruded, fillColor, geodesic, innerPaths, path, strokeColor, strokeWidth, zIndex, outerCoordinates, innerCoordinates
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.
removeEventListener
removeEventListener(type, listener[, options])
Parametri: 
Valore restituito:  void
Rimuove dal target un listener di eventi precedentemente registrato con addEventListener. Consulta removeEventListener.
gmp-click
function(clickEvent)
Argomenti: 
  • clickEvent:  LocationClickEvent l'oggetto evento conterrà la posizione di latitudine, longitudine e altitudine del clic.
Questo evento viene attivato quando si fa clic sull'elemento Polygon3DInteractiveElement.

Interfaccia Polygon3DInteractiveElementOptions

Interfaccia google.maps.maps3d.Polygon3DInteractiveElementOptions

Oggetto Polygon3DInteractiveElementOptions utilizzato per definire le proprietà che possono essere impostate su un Polygon3DInteractiveElement.

Questa interfaccia estende Polygon3DElementOptions.

Ereditato: altitudeMode, drawsOccludedSegments, extruded, fillColor, geodesic, innerCoordinates, outerCoordinates, strokeColor, strokeWidth, zIndex

Classe PopoverElement

Classe google.maps.maps3d.PopoverElement

Un elemento HTML personalizzato che esegue il rendering di un popover. Sembra un fumetto ed è spesso collegato a un indicatore.

Elemento personalizzato:
<gmp-popover altitude-mode="absolute" auto-pan-disabled light-dismiss-disabled open position-anchor="lat,lng"></gmp-popover>

Questa classe estende HTMLElement.

Questa classe implementa PopoverElementOptions.

Accedi chiamando il numero const {PopoverElement} = await google.maps.importLibrary("maps3d").
Consulta Librerie nell'API Maps JavaScript.
PopoverElement
PopoverElement([options])
Parametri: 
altitudeMode
Tipo:  AltitudeMode optional
Valore predefinito: AltitudeMode.CLAMP_TO_GROUND
Specifica come viene interpretato il componente di altitudine della posizione.
Attributo HTML:
  • <gmp-popover altitude-mode="absolute"></gmp-popover>
  • <gmp-popover altitude-mode="clamp-to-ground"></gmp-popover>
  • <gmp-popover altitude-mode="relative-to-ground"></gmp-popover>
  • <gmp-popover altitude-mode="relative-to-mesh"></gmp-popover>
autoPanDisabled
Tipo:  boolean optional
Valore predefinito: false
Se impostato su true, disattiva la panoramica della mappa per rendere il popover completamente visibile quando si apre.
Attributo HTML:
  • <gmp-popover auto-pan-disabled></gmp-popover>
lightDismissDisabled
Tipo:  boolean optional
Valore predefinito: false
Specifica se questo popover deve essere chiuso con un clic all'esterno o meno. Il comportamento di "chiusura semplice" è simile all'impostazione dell'attributo popover="auto", che fa parte dell'API Popover del browser.
Attributo HTML:
  • <gmp-popover light-dismiss-disabled></gmp-popover>
open
Tipo:  boolean optional
Valore predefinito: false
Specifica se questo popover deve essere aperto o meno.
Attributo HTML:
  • <gmp-popover open></gmp-popover>
positionAnchor
La posizione in cui visualizzare questo popover. Se il popover è ancorato a un indicatore interattivo, verrà utilizzata la posizione dell'indicatore.
Attributo HTML:
  • <gmp-popover position-anchor="lat,lng"></gmp-popover>
  • <gmp-popover position-anchor="lat,lng,altitude"></gmp-popover>
  • <gmp-popover position-anchor="marker-id"></gmp-popover>
default
Posiziona i contenuti con slot nella sezione principale del popover.
header
Posiziona i contenuti con slot nella sezione dell'intestazione del popover.
--gmp-popover-max-width
Larghezza massima del popover, indipendentemente dalla larghezza dei contenuti.
--gmp-popover-min-width
Larghezza minima del popover, indipendentemente dalla larghezza dei contenuti. Quando utilizzi questa proprietà, ti consigliamo vivamente di impostarla su un valore inferiore alla larghezza della mappa (in pixel).
--gmp-popover-pixel-offset-x
L'offset sull'asse X, in pixel, della punta del popover rispetto al punto sulla mappa alle cui coordinate geografiche è ancorato il popover.
--gmp-popover-pixel-offset-y
L'offset sull'asse Y, in pixel, della punta del popover rispetto al punto sulla mappa alle cui coordinate geografiche è ancorato il popover.
background-color
Il colore di sfondo del popover. Per ulteriori dettagli, consulta la documentazione di background-color. Tieni presente che anche il popover predefinito del luogo è interessato da questa proprietà. Utilizza classi CSS o stili incorporati mirati nei popover personalizzati per evitare di applicare stili al popover predefinito del luogo.
border-radius
Il raggio del bordo del popover. Per ulteriori dettagli, consulta la documentazione di border-radius. Tieni presente che anche il popover predefinito del luogo è interessato da questa proprietà. Utilizza classi CSS o stili incorporati mirati nei popover personalizzati per evitare di applicare stili al popover predefinito del luogo.
box-shadow
L'ombreggiatura del popover. Per ulteriori dettagli, consulta la documentazione di box-shadow. Tieni presente che anche il popover predefinito del luogo è interessato da questa proprietà. Utilizza classi CSS o stili incorporati mirati nei popover personalizzati per evitare di applicare stili al popover predefinito del luogo.
color-scheme
Indica la combinazione di colori in cui può essere visualizzato questo popover. Per ulteriori dettagli, consulta la documentazione di color-scheme. Se non specificato, il valore predefinito è la combinazione di colori preferita dell'utente.
padding
La spaziatura interna del popover. Per ulteriori dettagli, consulta la documentazione di padding. Tieni presente che anche il popover predefinito del luogo è interessato da questa proprietà. Utilizza classi CSS o stili incorporati mirati nei popover personalizzati per evitare di applicare stili al popover predefinito del luogo.
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.
removeEventListener
removeEventListener(type, listener[, options])
Parametri: 
Valore restituito:  void
Rimuove dal target un listener di eventi precedentemente registrato con addEventListener. Consulta removeEventListener.

Interfaccia PopoverElementOptions

Interfaccia google.maps.maps3d.PopoverElementOptions

Oggetto PopoverElementOptions utilizzato per definire le proprietà che possono essere impostate su un PopoverElement.
altitudeMode optional
Tipo:  AltitudeMode optional
Leggi i PopoverElement.altitudeMode.
autoPanDisabled optional
Tipo:  boolean optional
Leggi i PopoverElement.autoPanDisabled.
lightDismissDisabled optional
Tipo:  boolean optional
Leggi i PopoverElement.lightDismissDisabled.
open optional
Tipo:  boolean optional
Leggi i PopoverElement.open.
positionAnchor optional
Leggi i PopoverElement.positionAnchor.

Costanti AltitudeMode

Costanti google.maps.maps3d.AltitudeMode

Specifica il modo in cui vengono interpretati i componenti dell'altitudine nelle coordinate.

Accedi chiamando il numero const {AltitudeMode} = await google.maps.importLibrary("maps3d").
Consulta Librerie nell'API Maps JavaScript.
ABSOLUTE Consente di esprimere gli oggetti in relazione al livello medio del mare. Ciò significa anche che se il livello di dettaglio del terreno cambia sotto l'oggetto, la sua posizione assoluta rimarrà invariata.
CLAMP_TO_GROUND Consente di esprimere gli oggetti posizionati sul terreno. Rimarranno a livello del suolo seguendo il terreno, indipendentemente dall'altitudine fornita. Se l'oggetto è posizionato sopra un grande specchio d'acqua, verrà posizionato a livello del mare.
RELATIVE_TO_GROUND Consente di esprimere gli oggetti in relazione alla superficie del suolo. Se il livello di dettaglio del terreno cambia, la posizione dell'oggetto rimarrà costante rispetto al suolo. Sull'acqua, l'altitudine verrà interpretata come un valore in metri sul livello del mare.
RELATIVE_TO_MESH Consente di esprimere gli oggetti in relazione al punto più alto tra terreno, edificio e superficie dell'acqua. Sull'acqua, si tratta della superficie dell'acqua; sul terreno, si tratta della superficie dell'edificio (se presente) o della superficie del suolo (se non sono presenti edifici).