Draw on the map

Classe MarkerElement

google.maps.maps3d.MarkerElement class
extends HTMLElement
implements MarkerElementOptions
library "maps3d"

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

      
<gmp-marker
  altitude-mode="value-name"
  anchor-left="string"
  anchor-top="string"
  autofits-camera
  collision-behavior="value-name"
  collision-priority="number"
  position="lat,lng"
  title="string">
</gmp-marker>
const {MarkerElement} = await google.maps.importLibrary("maps3d");
MarkerElement
MarkerElement([options])
Parametri:
Crea un MarkerElement con le opzioni specificate.
altitudeMode
attr: altitude-mode
Tipo di input: AltitudeMode optional
Tipo di output: AltitudeMode
Valore predefinito: AltitudeMode.CLAMP_TO_GROUND
Specifica come viene interpretato il componente di altitudine della posizione.
Attributo HTML: altitude-mode="value-name"
anchorLeft
attr: anchor-left
Tipo di input: string optional
Tipo di output: string
Valore predefinito: -50%
Un valore di lunghezza-percentuale CSS utilizzato per compensare il punto di ancoraggio dall'angolo in alto a sinistra dell'indicatore. Questa opzione è utile quando utilizzi un elemento visivo con un punto di ancoraggio diverso dal tipico punto centrale inferiore dell'indicatore predefinito.
Attributo HTML: anchor-left="string"
anchorTop
attr: anchor-top
Tipo di input: string optional
Tipo di output: string
Valore predefinito: -100%
Un valore di lunghezza-percentuale CSS utilizzato per compensare il punto di ancoraggio dall'angolo in alto a sinistra dell'indicatore. Questa opzione è utile quando utilizzi un elemento visivo con un punto di ancoraggio diverso dal tipico punto centrale inferiore dell'indicatore predefinito.
Attributo HTML: anchor-top="string"
AlphaautofitsCamera
attr: autofits-camera
Tipo: boolean optional
Valore predefinito: false
Se fornito, l'indicatore specificato verrà reso visibile nell'area visibile della mappa, insieme a tutti gli altri elementi che hanno attivato l'opzione.
Attributo HTML: autofits-camera
collisionBehavior
attr: collision-behavior
Tipo di input: CollisionBehavior optional
Tipo di output: CollisionBehavior
Valore predefinito: CollisionBehavior.REQUIRED
Un'enumerazione che specifica il comportamento di un MarkerElement quando entra in conflitto con un altro MarkerElement, Marker3DElement o con le etichette della mappa base.
Attributo HTML: collision-behavior="value-name"
collisionPriority
attr: collision-priority
Tipo di input: number optional
Tipo di output: number optional
Un numero utilizzato per determinare la priorità relativa tra gli indicatori CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY (incluso Marker3DElement). Un valore collisionPriority più elevato indica una priorità più alta.
Attributo HTML: collision-priority="number"
position
attr: position
Tipo di input: LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional
Tipo di output: LatLngAltitude optional
La posizione della punta dell'indicatore. L'altitudine viene ignorata in determinate modalità ed è quindi facoltativa.
Attributo HTML:
  • position="lat,lng"
  • position="lat,lng,altitude"
title
attr: title
Tipo: string
Testo di rollover. Se fornito, un testo di accessibilità (ad es. da utilizzare con gli screen reader) verrà aggiunto a MarkerElement con il valore fornito.
Attributo HTML: title="string"
default
Tutti gli elementi personalizzati aggiunti direttamente a MarkerElement verranno inseriti in uno slot.
z-index
Lo z-index di questo indicatore. Per ulteriori dettagli, consulta la documentazione di z-index. Gli indicatori sovrapposti con un indice z più grande coprono quelli con un indice z più piccolo. Per impostazione predefinita, gli indicatori vengono visualizzati in base alla loro posizione nel DOM, con gli indicatori aggiunti successivamente nel DOM che vengono visualizzati davanti a quelli aggiunti in precedenza.
Ereditato: addEventListener, removeEventListener

Interfaccia MarkerElementOptions

Interfaccia google.maps.maps3d.MarkerElementOptions

Oggetto MarkerElementOptions utilizzato per definire le proprietà che possono essere impostate su un MarkerElement.

altitudeMode
facoltativo
Tipo: AltitudeMode optional
anchorLeft
facoltativo
Tipo: string optional
anchorTop
facoltativo
Tipo: string optional
AlphaautofitsCamera
facoltativo
Tipo: boolean optional
collisionBehavior
facoltativo
Tipo: CollisionBehavior optional
collisionPriority
facoltativo
Tipo: number optional
position
facoltativo
title
facoltativo
Tipo: string optional

Classe MarkerInteractiveElement

google.maps.maps3d.MarkerInteractiveElement class
extends MarkerElement
implements MarkerInteractiveElementOptions
library "maps3d"

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

<gmp-marker-interactive
  gmp-popover-target-element="popover-id">
</gmp-marker-interactive>
const {MarkerInteractiveElement} = await google.maps.importLibrary("maps3d");
MarkerInteractiveElement
MarkerInteractiveElement([options])
Parametri:
Crea un MarkerInteractiveElement con le opzioni specificate.
gmpPopoverTargetElement
attr: gmp-popover-target-element
Tipo di input: PopoverElement optional
Tipo di output: PopoverElement optional
Se impostato, l'elemento popover verrà aperto al clic su questo indicatore.
Attributo HTML: gmp-popover-target-element="popover-id"
Ereditato: altitudeMode (attr: altitude-mode), anchorLeft (attr: anchor-left), anchorTop (attr: anchor-top), AlphaautofitsCamera (attr: autofits-camera), collisionBehavior (attr: collision-behavior), collisionPriority (attr: collision-priority), position (attr: position), title (attr: title)
Ereditato: default
Ereditato: z-index
Ereditato: addEventListener, removeEventListener
gmp-click
function(clickEvent)
Argomenti:
Questo evento viene attivato quando si fa clic sull'elemento MarkerInteractiveElement.

Interfaccia MarkerInteractiveElementOptions

google.maps.maps3d.MarkerInteractiveElementOptions interface
extends MarkerElementOptions

Oggetto MarkerInteractiveElementOptions utilizzato per definire le proprietà che possono essere impostate su un MarkerInteractiveElement.

gmpPopoverTargetElement
facoltativo
Tipo: PopoverElement optional
Ereditate: altitudeMode, anchorLeft, anchorTop, AlphaautofitsCamera, collisionBehavior, collisionPriority, position, title

Classe Marker3DElement

google.maps.maps3d.Marker3DElement class
extends HTMLElement
implements Marker3DElementOptions
library "maps3d"

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

     
<gmp-marker-3d
  altitude-mode="value-name"
  autofits-camera
  collision-behavior="value-name"
  collision-priority="number"
  draws-when-occluded
  extruded
  label="string"
  position="lat,lng"
  size-preserved
  z-index="number">
</gmp-marker-3d>
const {Marker3DElement} = await google.maps.importLibrary("maps3d");
Marker3DElement
Marker3DElement([options])
Parametri:
Crea un Marker3DElement con le opzioni specificate.
altitudeMode
attr: altitude-mode
Tipo di input: AltitudeMode optional
Tipo di output: AltitudeMode
Valore predefinito: AltitudeMode.CLAMP_TO_GROUND
Specifica come viene interpretato il componente di altitudine della posizione.
Attributo HTML: altitude-mode="value-name"
AlphaautofitsCamera
attr: autofits-camera
Tipo di input: boolean optional
Tipo di output: boolean
Valore predefinito: false
Se fornito, l'indicatore specificato verrà reso visibile nell'area visibile della mappa, insieme a tutti gli altri elementi che hanno attivato l'opzione.
Attributo HTML: autofits-camera
collisionBehavior
attr: collision-behavior
Tipo di input: CollisionBehavior optional
Tipo di output: CollisionBehavior
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: collision-behavior="value-name"
collisionPriority
attr: collision-priority
Tipo di input: number optional
Tipo di output: number optional
La priorità di collisione utilizzata per il rilevamento delle collisioni.
Attributo HTML: collision-priority="number"
drawsWhenOccluded
attr: draws-when-occluded
Tipo di input: boolean optional
Tipo di output: boolean
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: draws-when-occluded
extruded
attr: extruded
Tipo di input: boolean optional
Tipo di output: boolean
Valore predefinito: false
Specifica se collegare l'indicatore al suolo. Per estrudere un indicatore, altitudeMode deve essere RELATIVE_TO_GROUND o ABSOLUTE.
Attributo HTML: extruded
label
attr: label
Tipo di input: string optional
Tipo di output: string optional
Testo da visualizzare con questo indicatore.
Attributo HTML: label="string"
position
attr: position
Tipo di input: LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional
Tipo di output: LatLngAltitude optional
La posizione della punta dell'indicatore. L'altitudine viene ignorata in determinate modalità ed è quindi facoltativa.
Attributo HTML:
  • position="lat,lng"
  • position="lat,lng,altitude"
sizePreserved
attr: size-preserved
Tipo di input: boolean optional
Tipo di output: boolean
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: size-preserved
zIndex
attr: z-index
Tipo di input: number optional
Tipo di output: number optional
Lo zIndex rispetto ad altri indicatori.
Attributo HTML: z-index="number"
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.
Ereditato: addEventListener, removeEventListener

Interfaccia Marker3DElementOptions

Interfaccia google.maps.maps3d.Marker3DElementOptions

Oggetto Marker3DElementOptions utilizzato per definire le proprietà che possono essere impostate su un Marker3DElement.

altitudeMode
facoltativo
Tipo: AltitudeMode optional
AlphaautofitsCamera
facoltativo
Tipo: boolean optional
collisionBehavior
facoltativo
Tipo: CollisionBehavior optional
collisionPriority
facoltativo
Tipo: number optional
drawsWhenOccluded
facoltativo
Tipo: boolean optional
extruded
facoltativo
Tipo: boolean optional
label
facoltativo
Tipo: string optional
position
facoltativo
sizePreserved
facoltativo
Tipo: boolean optional
zIndex
facoltativo
Tipo: number optional

Classe Marker3DInteractiveElement

google.maps.maps3d.Marker3DInteractiveElement class
extends Marker3DElement
implements Marker3DInteractiveElementOptions
library "maps3d"

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.

 
<gmp-marker-3d-interactive
  gmp-popover-target-element="popover-id"
  title="string">
</gmp-marker-3d-interactive>
const {Marker3DInteractiveElement} = await google.maps.importLibrary("maps3d");
Marker3DInteractiveElement
Marker3DInteractiveElement([options])
Parametri:
Crea un Marker3DInteractiveElement con le opzioni specificate.
gmpPopoverTargetElement
attr: gmp-popover-target-element
Tipo di input: PopoverElement optional
Tipo di output: PopoverElement optional
Se impostato, l'elemento popover verrà aperto al clic su questo indicatore.
Attributo HTML: gmp-popover-target-element="popover-id"
title
attr: 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: title="string"
Ereditato: altitudeMode (attr: altitude-mode), AlphaautofitsCamera (attr: autofits-camera), collisionBehavior (attr: collision-behavior), collisionPriority (attr: collision-priority), drawsWhenOccluded (attr: draws-when-occluded), extruded (attr: extruded), label (attr: label), position (attr: position), sizePreserved (attr: size-preserved), zIndex (attr: z-index)
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.
Ereditato: addEventListener, removeEventListener
gmp-click
function(clickEvent)
Argomenti:
Questo evento viene attivato quando si fa clic sull'elemento Marker3DInteractiveElement.

Interfaccia Marker3DInteractiveElementOptions

google.maps.maps3d.Marker3DInteractiveElementOptions interface
extends Marker3DElementOptions

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

gmpPopoverTargetElement
facoltativo
Tipo: PopoverElement optional
title
facoltativo
Tipo: string optional
Ereditato: altitudeMode, AlphaautofitsCamera, collisionBehavior, collisionPriority, drawsWhenOccluded, extruded, label, position, sizePreserved, zIndex

Classe Model3DElement

google.maps.maps3d.Model3DElement class
extends HTMLElement
implements Model3DElementOptions
library "maps3d"

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.

    
<gmp-model-3d
  altitude-mode="value-name"
  orientation="heading,tilt,roll"
  position="lat,lng"
  scale="number"
  src="url">
</gmp-model-3d>
const {Model3DElement} = await google.maps.importLibrary("maps3d");
Model3DElement
Model3DElement([options])
Parametri:
Crea un Model3DElement con le opzioni specificate.
altitudeMode
attr: altitude-mode
Tipo di input: AltitudeMode optional
Tipo di output: AltitudeMode
Valore predefinito: AltitudeMode.CLAMP_TO_GROUND
Specifica come viene interpretata l'altitudine nella posizione.
Attributo HTML: altitude-mode="value-name"
orientation
attr: orientation
Tipo di input: Orientation3D|Orientation3DLiteral optional
Tipo di output: Orientation3D optional
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: orientation="heading,tilt,roll"
position
attr: position
Tipo di input: LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional
Tipo di output: LatLngAltitude optional
Imposta la posizione di Model3DElement. L'altitudine viene ignorata in determinate modalità ed è quindi facoltativa.
Attributo HTML:
  • position="lat,lng"
  • position="lat,lng,altitude"
scale
attr: scale
Tipo di input: number|Vector3D|Vector3DLiteral optional
Tipo di output: Vector3D optional
Valore predefinito: 1
Scala il modello lungo gli assi x, y e z nello spazio delle coordinate del modello.
Attributo HTML:
  • scale="number"
  • scale="x,y,z"
src
attr: src
Tipo di input: string|URL optional
Tipo di output: 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: src="url"
Ereditato: addEventListener, removeEventListener

Interfaccia Model3DElementOptions

Interfaccia google.maps.maps3d.Model3DElementOptions

Oggetto Model3DElementOptions utilizzato per definire le proprietà che possono essere impostate su un Model3DElement.

altitudeMode
facoltativo
Tipo: AltitudeMode optional
orientation
facoltativo
position
facoltativo
scale
facoltativo
Tipo: number|Vector3D|Vector3DLiteral optional
src
facoltativo
Tipo: string|URL optional

Classe Model3DInteractiveElement

google.maps.maps3d.Model3DInteractiveElement class
extends Model3DElement
implements Model3DInteractiveElementOptions
library "maps3d"

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.

<gmp-model-3d-interactive></gmp-model-3d-interactive>
const {Model3DInteractiveElement} = await google.maps.importLibrary("maps3d");
Model3DInteractiveElement
Model3DInteractiveElement([options])
Parametri:
Crea un Model3DInteractiveElement con le opzioni specificate.
Ereditato: altitudeMode (attr: altitude-mode), orientation (attr: orientation), position (attr: position), scale (attr: scale), src (attr: src)
Ereditato: addEventListener, removeEventListener
gmp-click
function(clickEvent)
Argomenti:
Questo evento viene attivato quando si fa clic sull'elemento Model3DInteractiveElement.

Interfaccia Model3DInteractiveElementOptions

google.maps.maps3d.Model3DInteractiveElementOptions interface
extends Model3DElementOptions

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

Ereditate: altitudeMode, orientation, position, scale, src

Classe Polyline3DElement

google.maps.maps3d.Polyline3DElement class
extends HTMLElement
implements Polyline3DElementOptions
library "maps3d"

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

      
<gmp-polyline-3d
  altitude-mode="value-name"
  autofits-camera
  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>
const {Polyline3DElement} = await google.maps.importLibrary("maps3d");
Polyline3DElement
Polyline3DElement([options])
Parametri:
Crea un Polyline3DElement con le opzioni specificate.
altitudeMode
attr: altitude-mode
Tipo di input: AltitudeMode optional
Tipo di output: AltitudeMode
Valore predefinito: AltitudeMode.CLAMP_TO_GROUND
Specifica il modo in cui vengono interpretati i componenti dell'altitudine nelle coordinate.
Attributo HTML: altitude-mode="value-name"
AlphaautofitsCamera
attr: autofits-camera
Tipo di input: boolean optional
Tipo di output: boolean
Valore predefinito: false
Se fornita, la polilinea specificata verrà resa visibile nell'area visibile della mappa, insieme a tutti gli altri elementi che hanno attivato l'opzione.
Attributo HTML: autofits-camera
drawsOccludedSegments
attr: draws-occluded-segments
Tipo di input: boolean optional
Tipo di output: boolean
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: draws-occluded-segments
extruded
attr: extruded
Tipo di input: boolean optional
Tipo di output: boolean
Valore predefinito: false
Specifica se collegare la polilinea al suolo. Per estrudere una polilinea, altitudeMode deve essere RELATIVE_TO_GROUND o ABSOLUTE.
Attributo HTML: extruded
geodesic
attr: geodesic
Tipo di input: boolean optional
Tipo di output: boolean
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: geodesic
outerColor
attr: outer-color
Tipo di input: string optional
Tipo di output: string optional
Il colore esterno. Sono supportati tutti i colori CSS3.
Attributo HTML: outer-color="string"
outerWidth
attr: outer-width
Tipo di input: number optional
Tipo di output: number optional
La larghezza esterna è compresa tra 0.0 e 1.0. Si tratta di una percentuale di strokeWidth.
Attributo HTML: outer-width="number"
path
attr: path
Tipo di input: Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional
Tipo di output: Array<LatLngAltitude> optional
La sequenza ordinata di coordinate della polilinea. L'altitudine viene ignorata in determinate modalità ed è quindi facoltativa.
Attributo HTML: path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..."
strokeColor
attr: stroke-color
Tipo di input: string optional
Tipo di output: string optional
Il colore del tratto. Sono supportati tutti i colori CSS3.
Attributo HTML: stroke-color="string"
strokeWidth
attr: stroke-width
Tipo di input: number optional
Tipo di output: number optional
La larghezza del tratto in pixel.
Attributo HTML: stroke-width="number"
zIndex
attr: z-index
Tipo di input: number optional
Tipo di output: number optional
Lo zIndex rispetto ad altri poligoni.
Attributo HTML: z-index="number"
coordinates
La sequenza ordinata di coordinate della polilinea. L'altitudine viene ignorata in determinate modalità ed è quindi facoltativa.
Ereditato: addEventListener, removeEventListener

Interfaccia Polyline3DElementOptions

Interfaccia google.maps.maps3d.Polyline3DElementOptions

Oggetto Polyline3DElementOptions utilizzato per definire le proprietà che possono essere impostate su un Polyline3DElement.

altitudeMode
facoltativo
Tipo: AltitudeMode optional
AlphaautofitsCamera
facoltativo
Tipo: boolean optional
coordinates
facoltativo
drawsOccludedSegments
facoltativo
Tipo: boolean optional
extruded
facoltativo
Tipo: boolean optional
geodesic
facoltativo
Tipo: boolean optional
outerColor
facoltativo
Tipo: string optional
outerWidth
facoltativo
Tipo: number optional
path
facoltativo
strokeColor
facoltativo
Tipo: string optional
strokeWidth
facoltativo
Tipo: number optional
zIndex
facoltativo
Tipo: number optional

Classe Polyline3DInteractiveElement

google.maps.maps3d.Polyline3DInteractiveElement class
extends Polyline3DElement
implements Polyline3DInteractiveElementOptions
library "maps3d"

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.

<gmp-polyline-3d-interactive></gmp-polyline-3d-interactive>
const {Polyline3DInteractiveElement} = await google.maps.importLibrary("maps3d");
Polyline3DInteractiveElement
Polyline3DInteractiveElement([options])
Parametri:
Crea un Polyline3DInteractiveElement con le opzioni specificate.
Ereditato: altitudeMode (attr: altitude-mode), AlphaautofitsCamera (attr: autofits-camera), drawsOccludedSegments (attr: draws-occluded-segments), extruded (attr: extruded), geodesic (attr: geodesic), outerColor (attr: outer-color), outerWidth (attr: outer-width), path (attr: path), strokeColor (attr: stroke-color), strokeWidth (attr: stroke-width), zIndex (attr: z-index), coordinates
Ereditato: addEventListener, removeEventListener
gmp-click
function(clickEvent)
Argomenti:
  • clickEvent: LocationClickEvent optional 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

google.maps.maps3d.Polyline3DInteractiveElementOptions interface
extends Polyline3DElementOptions

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

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

Classe Polygon3DElement

google.maps.maps3d.Polygon3DElement class
extends HTMLElement
implements Polygon3DElementOptions
library "maps3d"

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.

    
<gmp-polygon-3d
  autofits-camera
  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>
const {Polygon3DElement} = await google.maps.importLibrary("maps3d");
Polygon3DElement
Polygon3DElement([options])
Parametri:
Crea un Polygon3DElement con le opzioni specificate.
altitudeMode
Tipo di input: AltitudeMode optional
Tipo di output: AltitudeMode
Valore predefinito: AltitudeMode.CLAMP_TO_GROUND
Specifica il modo in cui vengono interpretati i componenti dell'altitudine nelle coordinate.
AlphaautofitsCamera
attr: autofits-camera
Tipo di input: boolean optional
Tipo di output: boolean
Valore predefinito: false
Se fornito, il poligono specificato verrà reso visibile nell'area visibile della mappa, insieme a tutti gli altri elementi che hanno attivato l'opzione.
Attributo HTML: autofits-camera
drawsOccludedSegments
attr: draws-occluded-segments
Tipo di input: boolean optional
Tipo di output: boolean
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: draws-occluded-segments
extruded
attr: extruded
Tipo di input: boolean optional
Tipo di output: boolean
Valore predefinito: false
Specifica se collegare il poligono al suolo. Per estrudere un poligono, altitudeMode deve essere RELATIVE_TO_GROUND o ABSOLUTE.
Attributo HTML: extruded
fillColor
attr: fill-color
Tipo di input: string optional
Tipo di output: string optional
Il colore di riempimento. Sono supportati tutti i colori CSS3.
Attributo HTML: fill-color="string"
geodesic
attr: geodesic
Tipo di input: boolean optional
Tipo di output: boolean
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: geodesic
innerPaths
Tipo di input: Iterable<Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral>> optional
Tipo di output: Array<Array<LatLngAltitude>> optional
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
attr: path
Tipo di input: Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional
Tipo di output: Array<LatLngAltitude> optional
La sequenza ordinata di coordinate che designa un loop chiuso. L'altitudine viene ignorata in determinate modalità ed è quindi facoltativa.
Attributo HTML: path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..."
strokeColor
attr: stroke-color
Tipo di input: string optional
Tipo di output: string optional
Il colore del tratto. Sono supportati tutti i colori CSS3.
Attributo HTML: stroke-color="string"
strokeWidth
attr: stroke-width
Tipo di input: number optional
Tipo di output: number optional
La larghezza del tratto in pixel.
Attributo HTML: stroke-width="number"
zIndex
attr: z-index
Tipo di input: number optional
Tipo di output: number optional
Lo zIndex rispetto ad altri poligoni.
Attributo HTML: z-index="number"
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.
Ereditato: addEventListener, removeEventListener

Interfaccia Polygon3DElementOptions

Interfaccia google.maps.maps3d.Polygon3DElementOptions

Oggetto Polygon3DElementOptions utilizzato per definire le proprietà che possono essere impostate su un Polygon3DElement.

altitudeMode
facoltativo
Tipo: AltitudeMode optional
AlphaautofitsCamera
facoltativo
Tipo: boolean optional
drawsOccludedSegments
facoltativo
Tipo: boolean optional
extruded
facoltativo
Tipo: boolean optional
fillColor
facoltativo
Tipo: string optional
geodesic
facoltativo
Tipo: boolean optional
innerCoordinates
facoltativo
innerPaths
facoltativo
outerCoordinates
facoltativo
path
facoltativo
strokeColor
facoltativo
Tipo: string optional
strokeWidth
facoltativo
Tipo: number optional
zIndex
facoltativo
Tipo: number optional

Classe Polygon3DInteractiveElement

google.maps.maps3d.Polygon3DInteractiveElement class
extends Polygon3DElement
implements Polygon3DInteractiveElementOptions
library "maps3d"

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.

<gmp-polygon-3d-interactive></gmp-polygon-3d-interactive>
const {Polygon3DInteractiveElement} = await google.maps.importLibrary("maps3d");
Polygon3DInteractiveElement
Polygon3DInteractiveElement([options])
Parametri:
Crea un Polygon3DInteractiveElement con le opzioni specificate.
Ereditato: altitudeMode, AlphaautofitsCamera (attr: autofits-camera), drawsOccludedSegments (attr: draws-occluded-segments), extruded (attr: extruded), fillColor (attr: fill-color), geodesic (attr: geodesic), innerPaths, path (attr: path), strokeColor (attr: stroke-color), strokeWidth (attr: stroke-width), zIndex (attr: z-index), outerCoordinates, innerCoordinates
Ereditato: addEventListener, removeEventListener
gmp-click
function(clickEvent)
Argomenti:
  • clickEvent: LocationClickEvent optional 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

google.maps.maps3d.Polygon3DInteractiveElementOptions interface
extends Polygon3DElementOptions

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

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

Classe FlattenerElement

google.maps.maps3d.FlattenerElement class
extends HTMLElement
implements FlattenerElementOptions
library "maps3d"

Un elemento di appiattimento viene utilizzato per appiattire un'area specificata sulla mappa.

<gmp-flattener
  path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ...">
</gmp-flattener>
const {FlattenerElement} = await google.maps.importLibrary("maps3d");
FlattenerElement
FlattenerElement([options])
Parametri:
innerPaths
Tipo di input: Iterable<Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral>> optional
Tipo di output: Array<Array<LatLngAltitude>> optional
La sequenza ordinata di coordinate che designa un loop chiuso. Questi percorsi definiscono i fori di esclusione all'interno del percorso principale del poligono, ovvero la zona di appiattimento. Le aree all'interno di un innerPath sono esenti dall'appiattimento.
path
attr: path
Tipo di input: Iterable<LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral> optional
Tipo di output: Array<LatLngAltitude> optional
La sequenza ordinata di coordinate che designa un loop chiuso. Questo loop definisce la zona di appiattimento.
Attributo HTML: path="lat1,lng1,altitude1 lat2,lng2,altitude2 lat3,lng3,altitude3 ..."
Ereditato: addEventListener, removeEventListener

Interfaccia FlattenerElementOptions

Interfaccia google.maps.maps3d.FlattenerElementOptions

Oggetto FlattenerElementOptions utilizzato per definire le proprietà che possono essere impostate su un FlattenerElement.

innerPaths
facoltativo
path
facoltativo

Classe PopoverElement

google.maps.maps3d.PopoverElement class
extends HTMLElement
implements PopoverElementOptions
library "maps3d"

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

<gmp-popover
  auto-pan-disabled
  light-dismiss-disabled
  open
  position-anchor="lat,lng">
</gmp-popover>
const {PopoverElement} = await google.maps.importLibrary("maps3d");
PopoverElement
PopoverElement([options])
Parametri:
altitudeMode
Tipo di input: AltitudeMode optional
Tipo di output: AltitudeMode
Valore predefinito: AltitudeMode.CLAMP_TO_GROUND
Specifica come viene interpretato il componente di altitudine della posizione.
autoPanDisabled
attr: auto-pan-disabled
Tipo di input: boolean optional
Tipo di output: boolean
Valore predefinito: false
Se impostato su true, disattiva la panoramica della mappa per rendere il popover completamente visibile quando si apre.
Attributo HTML: auto-pan-disabled
lightDismissDisabled
attr: light-dismiss-disabled
Tipo di input: boolean optional
Tipo di output: boolean
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: light-dismiss-disabled
open
attr: open
Tipo di input: boolean optional
Tipo di output: boolean
Valore predefinito: false
Specifica se questo popover deve essere aperto o meno.
Attributo HTML: open
positionAnchor
attr: position-anchor
La posizione in cui visualizzare questo popover. Se il popover è ancorato a un indicatore interattivo, verrà utilizzata la posizione dell'indicatore.
Attributo HTML:
  • position-anchor="lat,lng"
  • position-anchor="lat,lng,altitude"
  • position-anchor="marker-id"
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.
Ereditato: addEventListener, removeEventListener

Interfaccia PopoverElementOptions

Interfaccia google.maps.maps3d.PopoverElementOptions

Oggetto PopoverElementOptions utilizzato per definire le proprietà che possono essere impostate su un PopoverElement.

altitudeMode
facoltativo
Tipo: AltitudeMode optional
autoPanDisabled
facoltativo
Tipo: boolean optional
lightDismissDisabled
facoltativo
Tipo: boolean optional
open
facoltativo
Tipo: boolean optional
positionAnchor
facoltativo

Costanti AltitudeMode

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

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

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

const {AltitudeMode} = await google.maps.importLibrary("maps3d");
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).

Classe CirclePathElement

google.maps.maps3d.CirclePathElement class
extends HTMLElement
implements CirclePathElementOptions
library "maps3d"

Un overlay circolare 3D su una mappa 3D.

 
<gmp-circle-path
  center="lat,lng,altitude"
  radius="number">
</gmp-circle-path>
const {CirclePathElement} = await google.maps.importLibrary("maps3d");
CirclePathElement
CirclePathElement([options])
Parametri:
Crea un CirclePathElement con le opzioni specificate.
center
attr: center
Tipo di input: LatLngAltitude|LatLngAltitudeLiteral|LatLngLiteral optional
Tipo di output: LatLngAltitude optional
Il centro del cerchio.
Attributo HTML: center="lat,lng,altitude"
radius
attr: radius
Tipo di input: number optional
Tipo di output: number optional
Il raggio del cerchio in metri.
Attributo HTML: radius="number"
Ereditato: addEventListener, removeEventListener

Interfaccia CirclePathElementOptions

Interfaccia google.maps.maps3d.CirclePathElementOptions

Oggetto CirclePathElementOptions utilizzato per definire le proprietà che possono essere impostate su un CirclePathElement.

center
facoltativo
radius
facoltativo
Tipo: number optional