Advanced Markers

Classe AdvancedMarkerElement

google.maps.marker.AdvancedMarkerElement class
extends HTMLElement
implements AdvancedMarkerElementOptions
library "marker"

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

   
<gmp-advanced-marker
  anchor-left="string"
  anchor-top="string"
  gmp-clickable
  position="lat,lng"
  title="string">
</gmp-advanced-marker>
const {AdvancedMarkerElement} = await google.maps.importLibrary("marker");
AdvancedMarkerElement
AdvancedMarkerElement([options])
Parametri:
Crea un AdvancedMarkerElement con le opzioni specificate. Se viene specificata una mappa, l'oggetto AdvancedMarkerElement viene aggiunto alla mappa al momento della creazione.
anchorLeft
attr: anchor-left
Tipo: string optional
Valore predefinito: "-50%"
Un valore di lunghezza-percentuale CSS utilizzato per compensare il punto di ancoraggio dell'indicatore 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: string optional
Valore predefinito: "-100%"
Un valore di lunghezza-percentuale CSS utilizzato per compensare il punto di ancoraggio dell'indicatore 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"
collisionBehavior
Tipo: CollisionBehavior optional
gmpClickable
attr: gmp-clickable
Tipo: boolean optional
Attributo HTML: gmp-clickable
gmpDraggable
Tipo: boolean optional
map
Tipo: Map optional
position
attr: position
Attributo HTML:
  • position="lat,lng"
  • position="lat,lng,altitude"
title
attr: title
Tipo: string
Attributo HTML: title="string"
zIndex
Tipo: number optional
element
readonly
Questo campo è di sola lettura. L'elemento DOM che supporta la visualizzazione.
content
Tipo: Node optional
addListener
addListener(eventName, handler)
Parametri:
  • eventName: string evento osservato.
  • handler: Function Funzione per gestire gli eventi.
Valore restituito: MapsEventListener Listener di eventi risultante.
Aggiunge la funzione listener specificata al nome evento specificato nel sistema di eventi di Maps.
Ereditato: addEventListener, removeEventListener
click
function(event)
Argomenti:
Questo evento viene attivato quando si fa clic sull'elemento AdvancedMarkerElement.

Non disponibile con addEventListener() (utilizza gmp-click).
drag
function(event)
Argomenti:
Questo evento viene attivato ripetutamente mentre l'utente trascina l'elemento AdvancedMarkerElement.

Non disponibile con addEventListener().
dragend
function(event)
Argomenti:
Questo evento viene attivato quando l'utente interrompe il trascinamento di AdvancedMarkerElement.

Non disponibile con addEventListener().
dragstart
function(event)
Argomenti:
Questo evento viene attivato quando l'utente inizia a trascinare l'elemento AdvancedMarkerElement.

Non disponibile con addEventListener().
gmp-click
function(event)
Argomenti:
Questo evento viene attivato quando si fa clic sull'elemento AdvancedMarkerElement. Da utilizzare preferibilmente con addEventListener() (anziché addListener()).

Interfaccia AdvancedMarkerElementOptions

Interfaccia google.maps.marker.AdvancedMarkerElementOptions

Opzioni per la creazione di un AdvancedMarkerElement.

anchorLeft
facoltativo
Tipo: string optional
Valore predefinito: "-50%"
Un valore di lunghezza-percentuale CSS utilizzato per compensare il punto di ancoraggio dell'indicatore 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.
anchorTop
facoltativo
Tipo: string optional
Valore predefinito: "-100%"
Un valore di lunghezza-percentuale CSS utilizzato per compensare il punto di ancoraggio dell'indicatore 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.
collisionBehavior
facoltativo
Tipo: CollisionBehavior optional
Un'enumerazione che specifica il comportamento di un AdvancedMarkerElement quando entra in conflitto con un altro AdvancedMarkerElement o con le etichette della mappa base su una mappa vettoriale.

Nota: la collisione tra AdvancedMarkerElement e AdvancedMarkerElement funziona sia sulle mappe raster che su quelle vettoriali, mentre la collisione tra AdvancedMarkerElement e l'etichetta della mappa base funziona solo sulle mappe vettoriali.

content
facoltativo
Tipo: Node optional
Valore predefinito: PinElement
L'elemento DOM che supporta l'aspetto visivo di un AdvancedMarkerElement.

Nota: AdvancedMarkerElement non clona l'elemento DOM passato. Una volta che l'elemento DOM viene passato a un AdvancedMarkerElement, il passaggio dello stesso elemento DOM a un altro AdvancedMarkerElement sposterà l'elemento DOM e farà apparire vuoto l'AdvancedMarkerElement precedente.

gmpClickable
facoltativo
Tipo: boolean optional
Valore predefinito: false
Se true, AdvancedMarkerElement sarà cliccabile e attiverà l'evento gmp-click, oltre a essere interattivo per l'accessibilità (ad es. consentendo la navigazione da tastiera tramite i tasti Freccia).
gmpDraggable
facoltativo
Tipo: boolean optional
Valore predefinito: false
Se true, AdvancedMarkerElement può essere trascinato.

Nota: AdvancedMarkerElement con altitudine non è trascinabile.

map
facoltativo
Tipo: Map optional
Mappa su cui visualizzare AdvancedMarkerElement. La mappa è necessaria per visualizzare AdvancedMarkerElement e può essere fornita impostando AdvancedMarkerElement.map se non viene fornita durante la costruzione.
position
facoltativo
Imposta la posizione di AdvancedMarkerElement. Un AdvancedMarkerElement può essere creato senza una posizione, ma non verrà visualizzato finché non viene fornita la sua posizione, ad esempio tramite le azioni o le scelte di un utente. La posizione di un AdvancedMarkerElement può essere fornita impostando AdvancedMarkerElement.position se non viene fornita durante la costruzione.

Nota: AdvancedMarkerElement con altitudine è supportato solo sulle mappe vettoriali.

title
facoltativo
Tipo: string optional
Testo di rollover. Se fornito, un testo di accessibilità (ad es. da utilizzare con gli screen reader) verrà aggiunto a AdvancedMarkerElement con il valore fornito.
zIndex
facoltativo
Tipo: number optional
Tutti gli elementi AdvancedMarkerElement vengono visualizzati sulla mappa in ordine di zIndex, con i valori più alti visualizzati davanti agli elementi AdvancedMarkerElement con valori più bassi. Per impostazione predefinita, i AdvancedMarkerElement vengono visualizzati in base alla loro posizione verticale sullo schermo, con i AdvancedMarkerElement più in basso che appaiono davanti ai AdvancedMarkerElement più in alto. La combinazione di indicatori con un zIndex esplicito e indicatori senza può portare a risultati visivi imprevisti. Per garantire un comportamento prevedibile, ti consigliamo di impostare zIndex per tutti gli indicatori o di lasciarlo non impostato. Tieni presente che zIndex viene utilizzato anche per determinare la priorità relativa tra i CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY indicatori avanzati. Un valore zIndex più alto indica una priorità più alta.

Classe AdvancedMarkerClickEvent

google.maps.marker.AdvancedMarkerClickEvent class
extends Event
library "marker"

Questo evento viene creato facendo clic su un indicatore avanzato. Accedi alla posizione dell'indicatore con event.target.position.

const {AdvancedMarkerClickEvent} = await google.maps.importLibrary("marker");

Classe PinElement

google.maps.marker.PinElement class
extends HTMLElement
implements PinElementOptions
library "marker"

Un PinElement rappresenta un elemento DOM costituito da una forma e un glifo. La forma ha lo stesso stile di fumetto visualizzato nell'elemento AdvancedMarkerElement o Marker3DElement predefinito. Il glifo è un elemento DOM facoltativo visualizzato nella forma del fumetto. Un PinElement può avere proporzioni diverse a seconda del suo PinElement.scale.

const {PinElement} = await google.maps.importLibrary("marker");
PinElement
PinElement([options])
Parametri:
background
Tipo: string optional
Il colore di sfondo della forma del segnaposto. Leggi i PinElementOptions.background.
borderColor
Tipo: string optional
Il colore del bordo della forma del segnaposto. Leggi i PinElementOptions.borderColor.
glyphColor
Tipo: string optional
Il colore del glifo del segnaposto. Leggi i PinElementOptions.glyphColor.
glyphSrc
Tipo: URL|string optional
L'origine dell'immagine del glifo da visualizzare nel segnaposto. Leggi i PinElementOptions.glyphSrc.
glyphText
Tipo: string optional
Il testo visualizzato nel segnaposto. Leggi i PinElementOptions.glyphText.
scale
Tipo: number optional
element
readonly
Questo campo è di sola lettura. L'elemento DOM che supporta la visualizzazione.
glyph
Tipo: string|Element|URL optional
Ereditato: addEventListener, removeEventListener

Interfaccia PinElementOptions

Interfaccia google.maps.marker.PinElementOptions

Opzioni per la creazione di un PinElement.

background
facoltativo
Tipo: string optional
Il colore di sfondo della forma del segnaposto. Supporta qualsiasi valore di colore CSS.
borderColor
facoltativo
Tipo: string optional
Il colore del bordo della forma del segnaposto. Supporta qualsiasi valore di colore CSS.
glyph
facoltativo
Tipo: string|Element|URL optional
L'elemento DOM visualizzato nel segnaposto.
glyphColor
facoltativo
Tipo: string optional
Il colore del glifo. Supporta qualsiasi valore di colore CSS.
glyphSrc
facoltativo
Tipo: URL|string optional
L'origine dell'immagine del glifo da visualizzare nel segnaposto.
glyphText
facoltativo
Tipo: string optional
Il testo visualizzato nel segnaposto.
scale
facoltativo
Tipo: number optional
Valore predefinito: 1
La scala del segnaposto.