Advanced Markers

Classe AdvancedMarkerElement

google.maps.marker.AdvancedMarkerElement corso

Mostra una posizione su una mappa. Tieni presente che position deve essere impostato per visualizzare AdvancedMarkerElement.

Nota: l'utilizzo come componente web (ad es. l'utilizzo dell'elemento HTML personalizzato <gmp-advanced-marker>) è disponibile solo nel canale v=beta.

Elemento personalizzato:
<gmp-advanced-marker position="lat,lng" title="string"></gmp-advanced-marker>

Questa classe estende HTMLElement.

Questa classe implementa AdvancedMarkerElementOptions.

Accedi chiamando const {AdvancedMarkerElement} = await google.maps.importLibrary("marker"). Consulta la sezione Librerie nell'API Maps JavaScript.

AdvancedMarkerElement
AdvancedMarkerElement([options])
Parametri: 
Crea un AdvancedMarkerElement con le opzioni specificate. Se viene specificata una mappa, AdvancedMarkerElement viene aggiunto alla mappa al momento della creazione.
collisionBehavior
Tipo:  CollisionBehavior optional
content
Tipo:  Node optional
element
Tipo:  HTMLElement
Questo campo è di sola lettura. L'elemento DOM alla base della visualizzazione.
BetagmpClickable
Tipo:  boolean optional
gmpDraggable
Tipo:  boolean optional
map
Tipo:  Map optional
position
Attributo HTML:
  • <gmp-advanced-marker position="lat,lng"></gmp-advanced-marker>
  • <gmp-advanced-marker position="lat,lng,altitude"></gmp-advanced-marker>
title
Tipo:  string
Attributo HTML:
  • <gmp-advanced-marker title="string"></gmp-advanced-marker>
zIndex
Tipo:  number optional
BetaaddEventListener
addEventListener(type, listener[, options])
Parametri: 
  • typestring una stringa sensibile alle maiuscole che rappresenta il tipo di evento da ascoltare.
  • listenerEventListener|EventListenerObject l'oggetto che riceve una notifica. Deve essere una funzione o un oggetto con il metodo handleEvent
  • optionsboolean|AddEventListenerOptions optional consulta 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 al target. Vedi addEventListener
addListener
addListener(eventName, handler)
Parametri: 
  • eventNamestring evento osservato.
  • handler:  funzione Function per gestire gli eventi.
Valore restituito:  MapsEventListener il listener di eventi risultante.
Aggiunge la funzione di listener specificata al nome dell'evento specificato nel sistema di eventi di Maps.
BetaremoveEventListener
removeEventListener(type, listener[, options])
Parametri: 
  • typestring una stringa che specifica il tipo di evento per cui rimuovere un gestore di eventi.
  • listenerEventListener|EventListenerObject Il listener di eventi dell'handler dell'evento da rimuovere dal target dell'evento.
  • optionsboolean|EventListenerOptions optional consulta le opzioni
Valore restituito:void
Rimuove dal target un gestore di eventi precedentemente registrato con addEventListener. Vedi 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 il AdvancedMarkerElement.

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

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

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

Interfaccia AdvancedMarkerElementOptions

google.maps.marker.AdvancedMarkerElementOptions interfaccia

Opzioni per la costruzione di un AdvancedMarkerElement.

collisionBehavior optional
Tipo:  CollisionBehavior optional
Un'enumerazione che specifica il comportamento di un AdvancedMarkerElement in caso di collisione con un altro AdvancedMarkerElement o con le etichette della mappa di base in una mappa vettoriale.

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

content optional
Tipo:  Node optional
Valore predefinito: PinElement.element
L'elemento DOM alla base della visualizzazione di un AdvancedMarkerElement.

Nota: AdvancedMarkerElement non clona l'elemento DOM passato. Una volta che l'elemento DOM è stato passato a un AdvancedMarkerElement, il passaggio dello stesso elemento DOM a un altro AdvancedMarkerElement ne comporterà lo spostamento e farà apparire vuoto il AdvancedMarkerElement precedente.

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

Nota: AdvancedMarkerElement con altitudine non è trascinabile.

map optional
Tipo:  Map optional
Mappa su cui visualizzare il AdvancedMarkerElement. La mappa è obbligatoria per visualizzare AdvancedMarkerElement e può essere fornita impostando AdvancedMarkerElement.map, se non è stata fornita durante la compilazione.
position optional
Imposta la posizione di AdvancedMarkerElement. Un AdvancedMarkerElement può essere costruito senza una posizione, ma non verrà visualizzato finché non ne viene fornita una, ad esempio in base alle azioni o alle scelte di un utente. La posizione di un AdvancedMarkerElement può essere fornita impostando AdvancedMarkerElement.position se non è fornita al momento della costruzione.

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

title optional
Tipo:  string optional
Testo del rollover. Se specificato, a AdvancedMarkerElement verrà aggiunto un testo di accessibilità (ad es. per l'utilizzo con gli screen reader) con il valore fornito.
zIndex optional
Tipo:  number optional
Tutti i AdvancedMarkerElement vengono visualizzati sulla mappa in ordine di zIndex, con i valori più alti visualizzati davanti ai 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. Tieni presente che zIndex viene utilizzato anche per determinare la priorità relativa tra gli indicatori avanzati CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY. Un valore zIndex più alto indica una priorità più elevata.

Classe AdvancedMarkerClickEvent

google.maps.marker.AdvancedMarkerClickEvent corso

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

Questa classe estende Event.

Accedi chiamando const {AdvancedMarkerClickEvent} = await google.maps.importLibrary("marker"). Consulta la sezione Librerie nell'API Maps JavaScript.

Classe PinElement

google.maps.marker.PinElement corso

Un PinElement rappresenta un elemento DOM costituito da una forma e un glifo. La forma ha lo stesso stile di fumetto di AdvancedMarkerElement predefinito. Il glif è un elemento DOM facoltativo visualizzato nella forma a fumetto. Un PinElement può avere un formato diverso a seconda del PinElement.scale.

Nota: l'utilizzo come componente web (ad es. come sottoclasse di HTMLElement o tramite HTML) non è ancora supportato.

Questa classe estende HTMLElement.

Questa classe implementa PinElementOptions.

Accedi chiamando const {PinElement} = await google.maps.importLibrary("marker"). Consulta la sezione Librerie nell'API Maps JavaScript.

PinElement
PinElement([options])
Parametri: 
background
Tipo:  string optional
borderColor
Tipo:  string optional
element
Tipo:  HTMLElement
Questo campo è di sola lettura. L'elemento DOM alla base della visualizzazione.
glyph
Tipo:  string|Element|URL optional
glyphColor
Tipo:  string optional
scale
Tipo:  number optional
BetaaddEventListener
addEventListener(type, listener[, options])
Parametri: 
Valore restituito:void
Questa funzione non è ancora disponibile per l'utilizzo.
BetaremoveEventListener
removeEventListener(type, listener[, options])
Parametri: 
  • typestring una stringa che specifica il tipo di evento per cui rimuovere un gestore di eventi.
  • listenerEventListener|EventListenerObject Il listener di eventi dell'handler dell'evento da rimuovere dal target dell'evento.
  • optionsboolean|EventListenerOptions optional consulta le opzioni
Valore restituito:void
Rimuove dal target un gestore di eventi precedentemente registrato con addEventListener. Vedi removeEventListener

Interfaccia PinElementOptions

google.maps.marker.PinElementOptions interfaccia

Opzioni per la creazione di un PinElement.

background optional
Tipo:  string optional
Il colore di sfondo della forma della freccia. Supporta qualsiasi valore di colore CSS.
borderColor optional
Tipo:  string optional
Il colore del bordo della forma del perno. Supporta qualsiasi valore di colore CSS.
glyph optional
Tipo:  string|Element|URL optional
L'elemento DOM visualizzato nel pin.
glyphColor optional
Tipo:  string optional
Il colore del glifo. Supporta qualsiasi valore di colore CSS.
scale optional
Tipo:  number optional
Valore predefinito: 1
La scala del perno.