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");
Costruttore | |
|---|---|
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. |
Proprietà | |
|---|---|
anchorLeft
attr: anchor-left |
Tipo:
string optionalValore 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 optionalValore 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 optionalAttributo HTML: gmp-clickable |
gmpDraggable |
Tipo:
boolean optional |
map |
Tipo:
Map optionalLeggi i AdvancedMarkerElementOptions.map. |
position
attr: position |
Tipo:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optionalAttributo HTML:
|
title
attr: title |
Tipo:
stringLeggi i
AdvancedMarkerElementOptions.title.Attributo HTML: title="string" |
zIndex |
Tipo:
number optionalLeggi i AdvancedMarkerElementOptions.zIndex. |
readonly |
Tipo:
HTMLElementQuesto campo è di sola lettura. L'elemento DOM che supporta la visualizzazione. |
|
Tipo:
Node optionalLeggi i AdvancedMarkerElementOptions.content. |
Metodi | |
|---|---|
addListener |
addListener(eventName, handler)Parametri:
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
| |
Eventi | |
|---|---|
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.
Proprietà | |
|---|---|
anchorLeft
facoltativo |
Tipo:
string optionalValore 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 optionalValore 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 optionalUn'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 |
content
facoltativo |
Tipo:
Node optionalValore predefinito:
PinElementL'elemento DOM che supporta l'aspetto visivo di un AdvancedMarkerElement. Nota: |
gmpClickable
facoltativo |
Tipo:
boolean optionalValore predefinito:
falseSe 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 optionalValore predefinito:
falseSe true, AdvancedMarkerElement può essere trascinato. Nota: |
map
facoltativo |
Tipo:
Map optionalMappa 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 |
Tipo:
LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optionalImposta 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: |
title
facoltativo |
Tipo:
string optionalTesto 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 optionalTutti 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");
Costruttore | |
|---|---|
PinElement |
PinElement([options])Parametri:
|
Proprietà | |
|---|---|
background |
Tipo:
string optionalIl colore di sfondo della forma del segnaposto. Leggi i PinElementOptions.background. |
borderColor |
Tipo:
string optionalIl colore del bordo della forma del segnaposto. Leggi i PinElementOptions.borderColor. |
glyphColor |
Tipo:
string optionalIl colore del glifo del segnaposto. Leggi i PinElementOptions.glyphColor. |
glyphSrc |
Tipo:
URL|string optionalL'origine dell'immagine del glifo da visualizzare nel segnaposto. Leggi i PinElementOptions.glyphSrc. |
glyphText |
Tipo:
string optionalIl testo visualizzato nel segnaposto. Leggi i PinElementOptions.glyphText. |
scale |
Tipo:
number optionalLeggi i PinElementOptions.scale. |
readonly |
Tipo:
HTMLElementQuesto campo è di sola lettura. L'elemento DOM che supporta la visualizzazione. |
|
Leggi i . |
Metodi | |
|---|---|
Ereditato:
addEventListener,
removeEventListener
|
Interfaccia PinElementOptions
Interfaccia google.maps.marker.PinElementOptions
Opzioni per la creazione di un PinElement.
Proprietà | |
|---|---|
background
facoltativo |
Tipo:
string optionalIl colore di sfondo della forma del segnaposto. Supporta qualsiasi valore di colore CSS. |
borderColor
facoltativo |
Tipo:
string optionalIl colore del bordo della forma del segnaposto. Supporta qualsiasi valore di colore CSS. |
facoltativo |
L'elemento DOM visualizzato nel segnaposto. |
glyphColor
facoltativo |
Tipo:
string optionalIl colore del glifo. Supporta qualsiasi valore di colore CSS. |
glyphSrc
facoltativo |
Tipo:
URL|string optionalL'origine dell'immagine del glifo da visualizzare nel segnaposto. |
glyphText
facoltativo |
Tipo:
string optionalIl testo visualizzato nel segnaposto. |
scale
facoltativo |
Tipo:
number optionalValore predefinito:
1La scala del segnaposto. |