Advanced Markers

Classe AdvancedMarkerElement

google.maps.marker.AdvancedMarkerElement corso

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

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

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

Questa lezione si estende a HTMLElement.

Questo corso 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 una mappa viene specificata, AdvancedMarkerElement viene aggiunto alla mappa in fase di costruzione.
collisionBehavior
Tipo:  CollisionBehavior optional
Leggi i AdvancedMarkerElementOptions.collisionBehavior.
content
Tipo:  Node optional
Leggi i AdvancedMarkerElementOptions.content.
element
Tipo:  HTMLElement
Questo campo è di sola lettura L'elemento DOM che supporta la visualizzazione.
gmpDraggable
Tipo:  boolean optional
Leggi i AdvancedMarkerElementOptions.gmpDraggable.
map
Tipo:  Map optional
Leggi i AdvancedMarkerElementOptions.map.
position
Leggi i AdvancedMarkerElementOptions.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
Leggi i AdvancedMarkerElementOptions.title.
Attributo HTML:
  • <gmp-advanced-marker title="string"></gmp-advanced-marker>
zIndex
Tipo:  number optional
Leggi i AdvancedMarkerElementOptions.zIndex.
BetaaddEventListener
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 consulta le opzioni. Gli eventi personalizzati supportano solo capture e passive.
Valore restituito:  void
Imposta una funzione che verrà chiamata ogni volta che l'evento specificato viene pubblicato nella destinazione. Vedi 📺
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 dell'evento specificato nel sistema Eventing di Maps.
BetaremoveEventListener
removeEventListener(type, listener[, options])
Parametri: 
  • type:  string una stringa che specifica il tipo di evento per il quale rimuovere un listener di eventi.
  • listener:  EventListener|EventListenerObject il listener di eventi del gestore di eventi da rimuovere dal target dell'evento.
  • options:  boolean|EventListenerOptions optional consulta le opzioni
Valore restituito:  void
Rimuove un listener di eventi precedentemente registrato con HSTS dal target. Vedi removeEvent listener
click
function(event)
Argomenti: 
Questo evento viene attivato quando viene fatto clic sull'elemento AdvancedMarkerElement.

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

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

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

Non disponibile con addEventListener().
Betagmp-click
function(event)
Argomenti: 
Questo evento viene attivato quando viene fatto clic sull'elemento AdvancedMarkerElement. Utilizzato al meglio con addEventListener() (anziché addListener()).

Interfaccia AdvancedMarkerElementOptions

Interfaccia google.maps.marker.AdvancedMarkerElementOptions

Opzioni per la creazione di AdvancedMarkerElement.
collisionBehavior optional
Tipo:  CollisionBehavior optional
Un'enumerazione che specifica il comportamento di un AdvancedMarkerElement quando si scontra con un altro AdvancedMarkerElement o con le etichette della mappa di base su una mappa vettoriale.

Nota: la collisione tra AdvancedMarkerElement e AdvancedMarkerElement funziona sia sulle mappe raster sia su quelle vettoriali, mentre AdvancedMarkerElement per la collisione delle etichette della mappa di base funziona solo sulle mappe vettoriali.
content optional
Tipo:  Node optional
Predefinito: PinElement.element
L'elemento DOM che supporta l'immagine di un AdvancedMarkerElement.

Nota: AdvancedMarkerElement non clona l'elemento DOM passato. Una volta passato l'elemento DOM in un AdvancedMarkerElement, il passaggio dello stesso elemento DOM a un altro AdvancedMarkerElement sposterà l'elemento DOM e farà sì che il precedente AdvancedMarkerElement sembri vuoto.
gmpDraggable optional
Tipo:  boolean optional
Predefinito: false
Se true, puoi trascinare AdvancedMarkerElement.

Nota: non è possibile trascinare AdvancedMarkerElement con l'altitudine.
map optional
Tipo:  Map optional
Mappa sulla quale visualizzare AdvancedMarkerElement. La mappa deve essere visualizzata con AdvancedMarkerElement e può essere fornita impostando AdvancedMarkerElement.map se non è in fase di costruzione.
position optional
Imposta la posizione della AdvancedMarkerElement. AdvancedMarkerElement può essere creato senza una posizione, ma non viene visualizzato finché non viene fornita la relativa posizione, ad esempio in base alle azioni o alle scelte dell'utente. La posizione di AdvancedMarkerElement può essere specificata impostando AdvancedMarkerElement.position se non viene fornita in fase di costruzione.

Nota: AdvancedMarkerElement con altitudine è supportato solo sulle mappe vettoriali.
title optional
Tipo:  string optional
Testo rollover. Se fornito, un testo di accessibilità (ad esempio da usare con gli screen reader) verrà aggiunto al tag AdvancedMarkerElement con il valore fornito.
zIndex optional
Tipo:  number optional
Tutti gli AdvancedMarkerElement vengono mostrati sulla mappa in ordine di zIndex, con i valori più alti mostrati davanti agli AdvancedMarkerElement con i valori più bassi. Per impostazione predefinita, i AdvancedMarkerElement vengono visualizzati in base alla loro posizione verticale sullo schermo, mentre i AdvancedMarkerElement più bassi appaiono davanti agli AdvancedMarkerElement più avanti sullo schermo. 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ù alta.

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 lezione si estende a 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

PinElement rappresenta un elemento DOM composto da una forma e un glifo. La forma ha lo stesso stile del fumetto visualizzato nell'elemento AdvancedMarkerElement predefinito. Il glifo è un elemento DOM facoltativo visualizzato a forma di palloncino. PinElement potrebbe avere proporzioni diverse a seconda del suo PinElement.scale.

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

Questa lezione si estende a HTMLElement.

Questo corso 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
Leggi i PinElementOptions.background.
borderColor
Tipo:  string optional
Leggi i PinElementOptions.borderColor.
element
Tipo:  HTMLElement
Questo campo è di sola lettura L'elemento DOM che supporta la visualizzazione.
glyph
Tipo:  string|Element|URL optional
Leggi i PinElementOptions.glyph.
glyphColor
Tipo:  string optional
Leggi i PinElementOptions.glyphColor.
scale
Tipo:  number optional
Leggi i PinElementOptions.scale.
BetaaddEventListener
addEventListener(type, listener[, options])
Parametri: 
Valore restituito:  void
Questa funzione non è ancora disponibile per l'utilizzo.
BetaremoveEventListener
removeEventListener(type, listener[, options])
Parametri: 
  • type:  string una stringa che specifica il tipo di evento per il quale rimuovere un listener di eventi.
  • listener:  EventListener|EventListenerObject il listener di eventi del gestore di eventi da rimuovere dal target dell'evento.
  • options:  boolean|EventListenerOptions optional consulta le opzioni
Valore restituito:  void
Rimuove un listener di eventi precedentemente registrato con HSTS dal target. Vedi removeEvent listener

Interfaccia PinElementOptions

Interfaccia google.maps.marker.PinElementOptions

Opzioni per la creazione di un PinElement.
background optional
Tipo:  string optional
Il colore di sfondo della forma del segnaposto. Supporta qualsiasi valore colore CSS.
borderColor optional
Tipo:  string optional
Il colore del bordo della forma del segnaposto. Supporta qualsiasi valore colore CSS.
glyph optional
Tipo:  string|Element|URL optional
L'elemento DOM visualizzato nel segnaposto.
glyphColor optional
Tipo:  string optional
Il colore del glifo. Supporta qualsiasi valore colore CSS.
scale optional
Tipo:  number optional
Predefinito: 1
La scala del perno.