Classe Marker
google.maps.Marker
classe
Questo corso si estende
MVCObject.
Accesso chiamando il numero const {Marker} = await google.maps.importLibrary("marker").
Consulta Librerie nell'API Maps JavaScript.
Costruttore | |
|---|---|
Marker |
Marker([opts])Parametri:
Crea un indicatore con le opzioni specificate. Se viene specificata una mappa, l'indicatore viene aggiunto alla mappa durante la costruzione. Tieni presente che la posizione deve essere impostata per visualizzare il marcatore. |
Costanti | |
|---|---|
MAX_ZINDEX |
L'indice z predefinito massimo che l'API assegnerà a un indicatore. Puoi impostare un indice z più elevato per portare un indicatore in primo piano. |
Metodi | |
|---|---|
getAnimation |
getAnimation()Parametri: nessuno
Valore restituito:
Animation|null|undefinedOttieni l'animazione attualmente in esecuzione. |
getClickable |
getClickable()Parametri: nessuno
Valore restituito:
boolean True se il marcatore è selezionabile.Visualizzare lo stato di cliccabilità del Marker. |
getCursor |
getCursor()Parametri: nessuno
Valore restituito:
string|null|undefinedVisualizza il tipo di cursore del mouse al passaggio del mouse. |
getDraggable |
getDraggable()Parametri: nessuno
Valore restituito:
boolean True se il marcatore è trascinabile.Visualizzare lo stato trascinabile di Marker. |
getIcon |
getIcon()Parametri: nessuno
Ottieni l'icona di Marker. Leggi i MarkerOptions.icon. |
getLabel |
getLabel()Parametri: nessuno
Valore restituito:
MarkerLabel|string|null|undefinedOttieni l'etichetta di Marker. Leggi i MarkerOptions.label. |
getMap |
getMap()Parametri: nessuno
Valore restituito:
Map|StreetViewPanoramaOttieni la mappa o il panorama su cui viene visualizzato Marker. |
getOpacity |
getOpacity()Parametri: nessuno
Valore restituito:
number|null|undefined un numero compreso tra 0,0 e 1,0.Ottieni l'opacità di Marker. |
getPosition |
getPosition()Parametri: nessuno
Valore restituito:
LatLng|null|undefinedOttieni la posizione di Marker. |
getShape |
getShape()Parametri: nessuno
Valore restituito:
MarkerShape|null|undefined |
getTitle |
getTitle()Parametri: nessuno
Valore restituito:
string|null|undefinedOttieni il titolo della descrizione comando Marker. Leggi i MarkerOptions.title. |
getVisible |
getVisible()Parametri: nessuno
Valore restituito:
boolean True se il marcatore è visibile.Ottieni la visibilità di Marker. |
getZIndex |
getZIndex()Parametri: nessuno
Valore restituito:
number|null|undefined zIndex del marcatore.Ottieni lo zIndex di Marker. Leggi i MarkerOptions.zIndex. |
setAnimation |
setAnimation([animation])Parametri:
Valore restituito:nessuno
Avviare un'animazione. Qualsiasi animazione in corso verrà annullata. Le animazioni attualmente supportate sono: Animation.BOUNCE, Animation.DROP. Se passi null, qualsiasi animazione verrà interrotta. |
setClickable |
setClickable(flag)Parametri:
Valore restituito:nessuno
Imposta se Marker è selezionabile. |
setCursor |
setCursor([cursor])Parametri:
Valore restituito:nessuno
Imposta il tipo di cursore del mouse visualizzato al passaggio del mouse. |
setDraggable |
setDraggable(flag)Parametri:
Valore restituito:nessuno
Imposta se Marker è trascinabile. |
setIcon |
setIcon([icon])Valore restituito:nessuno
Imposta l'icona per Marker. Leggi i MarkerOptions.icon. |
setLabel |
setLabel([label])Parametri:
Valore restituito:nessuno
Imposta l'etichetta per Marker. Leggi i MarkerOptions.label. |
setMap |
setMap(map)Parametri:
Valore restituito:nessuno
Esegue il rendering di Marker sulla mappa o sul panorama specificati. Se la mappa è impostata su null, il segnaposto verrà rimosso. |
setOpacity |
setOpacity([opacity])Parametri:
Valore restituito:nessuno
Imposta l'opacità di Marker. |
setOptions |
setOptions(options)Parametri:
Valore restituito:nessuno
Imposta le opzioni per Marker. |
setPosition |
setPosition([latlng])Parametri:
Valore restituito:nessuno
Imposta la posizione per Marker. |
setShape |
setShape([shape])Parametri:
Valore restituito:nessuno
|
setTitle |
setTitle([title])Parametri:
Valore restituito:nessuno
Imposta il titolo della descrizione comando Marker. Leggi i MarkerOptions.title. |
setVisible |
setVisible(visible)Parametri:
Valore restituito:nessuno
Imposta se Marker è visibile. |
setZIndex |
setZIndex([zIndex])Parametri:
Valore restituito:nessuno
Imposta zIndex di Marker. Leggi i MarkerOptions.zIndex. |
Ereditato:
addListener,
bindTo,
get,
notify,
set,
setValues,
unbind,
unbindAll
| |
Eventi | |
|---|---|
animation_changed |
function()Argomenti: nessuno
Questo evento viene attivato quando cambia la proprietà di animazione Marker. |
click |
function(event)Argomenti:
Questo evento viene attivato quando viene fatto clic sull'icona Marker. |
clickable_changed |
function()Argomenti: nessuno
Questo evento viene attivato quando la proprietà Marker cliccabile cambia. |
contextmenu |
function(event)Argomenti:
Questo evento viene attivato quando viene attivato l'evento DOM contextmenu su Marker |
cursor_changed |
function()Argomenti: nessuno
Questo evento viene attivato quando la proprietà del cursore Marker cambia. |
dblclick |
function(event)Argomenti:
Questo evento viene attivato quando viene fatto doppio clic sull'icona Marker. |
drag |
function(event)Argomenti:
Questo evento viene attivato ripetutamente mentre l'utente trascina Marker. |
dragend |
function(event)Argomenti:
Questo evento viene attivato quando l'utente smette di trascinare Marker. |
draggable_changed |
function()Argomenti: nessuno
Questo evento viene attivato quando la proprietà Marker trascinabile cambia. |
dragstart |
function(event)Argomenti:
Questo evento viene attivato quando l'utente inizia a trascinare Marker. |
flat_changed |
function()Argomenti: nessuno
Questo evento viene attivato quando la proprietà Marker cambia. |
icon_changed |
function()Argomenti: nessuno
Questo evento viene attivato quando cambia la proprietà dell'icona Marker. |
mousedown |
function(event)Argomenti:
Questo evento viene attivato quando si preme il tasto del mouse su Marker. |
mouseout |
function(event)Argomenti:
Questo evento viene attivato quando il mouse esce dall'area dell'icona Marker. |
mouseover |
function(event)Argomenti:
Questo evento viene attivato quando il mouse entra nell'area dell'icona Marker. |
mouseup |
function(event)Argomenti:
Questo evento viene attivato per un mouseup su Marker. |
position_changed |
function()Argomenti: nessuno
Questo evento viene attivato quando cambia la proprietà di posizione Marker. |
shape_changed |
function()Argomenti: nessuno
Questo evento viene attivato quando cambia la proprietà della forma Marker. |
title_changed |
function()Argomenti: nessuno
Questo evento viene attivato quando cambia la proprietà del titolo Marker. |
visible_changed |
function()Argomenti: nessuno
Questo evento viene attivato quando cambia la proprietà visibile di Marker. |
zindex_changed |
function()Argomenti: nessuno
Questo evento viene attivato quando cambia la proprietà Marker zIndex. |
|
function(event)Argomenti:
Questo evento viene attivato per un clic con il tasto destro del mouse su Marker. |
Interfaccia MarkerOptions
google.maps.MarkerOptions
interfaccia
Oggetto MarkerOptions utilizzato per definire le proprietà che possono essere impostate su un indicatore.
Proprietà | |
|---|---|
anchorPoint optional |
Tipo:
Point optionalL'offset dalla posizione del marcatore alla punta di una finestra informativa aperta con il marcatore come ancora. |
animation optional |
Tipo:
Animation optionalPredefinito:
nullQuale animazione riprodurre quando l'indicatore viene aggiunto a una mappa. |
clickable optional |
Tipo:
boolean optionalPredefinito:
trueSe true, il marcatore riceve eventi attivati con il mouse e il tocco. |
|
Tipo:
string|CollisionBehavior optionalPredefinito:
nullImposta un comportamento di collisione per i marcatori sulle mappe vettoriali. |
crossOnDrag optional |
Tipo:
boolean optionalPredefinito:
trueSe false, disattiva la croce che viene visualizzata sotto il marcatore durante il trascinamento. |
cursor optional |
Tipo:
string optionalPredefinito:
pointerTipo di cursore del mouse da mostrare al passaggio del mouse. |
draggable optional |
Tipo:
boolean optionalPredefinito:
falseSe true, il marcatore può essere trascinato. Nota:se imposti questo valore su true, il marcatore sarà selezionabile anche se clickable è impostato su false. |
icon optional |
Icona per il primo piano. Se viene fornita una stringa, viene trattata come se fosse un Icon con la stringa come url. |
label optional |
Tipo:
string|MarkerLabel optionalPredefinito:
nullAggiunge un'etichetta al marcatore. Un'etichetta del marcatore è una lettera o un numero che appare all'interno di un marcatore. L'etichetta può essere una stringa o un oggetto MarkerLabel. Se fornito e MarkerOptions.title non è fornito, al marcatore verrà aggiunto un testo di accessibilità (ad es. per l'utilizzo con screen reader) con il testo dell'etichetta fornita. Tieni presente che label viene attualmente utilizzato solo per il testo di accessibilità per i marcatori non ottimizzati. |
map optional |
Tipo:
Map|StreetViewPanorama optionalMappa su cui visualizzare il marcatore. La mappa è necessaria per visualizzare l'indicatore e può essere fornita con Marker.setMap se non viene fornita durante la creazione dell'indicatore. |
opacity optional |
Tipo:
number optionalValore predefinito: 1.0
Un numero compreso tra 0,0 (trasparente) e 1,0 (opaco). |
optimized optional |
Tipo:
boolean optionalL'ottimizzazione migliora il rendimento eseguendo il rendering di molti marcatori come un singolo elemento statico. È utile nei casi in cui è necessario un numero elevato di indicatori. Scopri di più sull'ottimizzazione dei marcatori. Nota:questa ottimizzazione non ha effetto sui marcatori delle mappe vettoriali. |
position optional |
Tipo:
LatLng|LatLngLiteral optionalImposta la posizione del marcatore. Un indicatore può essere costruito ma non visualizzato finché non viene fornita la sua posizione, ad esempio dalle azioni o dalle scelte di un utente. Se non viene fornita durante la creazione del marcatore, è possibile specificare la posizione di un marcatore con Marker.setPosition. |
shape optional |
Tipo:
MarkerShape optionalDefinizione della regione della mappa immagine utilizzata per il trascinamento/clic. |
title optional |
Tipo:
string optionalPredefinito:
undefinedTesto rollover. Se fornito, al marcatore verrà aggiunto un testo di accessibilità (ad es. per l'utilizzo con screen reader) con il valore fornito. Tieni presente che title viene attualmente utilizzato solo per il testo di accessibilità per i marcatori non ottimizzati. |
visible optional |
Tipo:
boolean optionalPredefinito:
trueSe true, il marcatore è visibile. |
zIndex optional |
Tipo:
number optionalTutti i marcatori vengono visualizzati sulla mappa in base al relativo zIndex, con i valori più alti visualizzati davanti ai marcatori con valori più bassi. Per impostazione predefinita, i marcatori vengono visualizzati in base alla loro posizione verticale sullo schermo, con i marcatori più in basso che appaiono davanti a quelli più in alto. |
CollisionBehavior costanti
google.maps.CollisionBehavior
costanti
Accesso chiamando il numero const {CollisionBehavior} = await google.maps.importLibrary("marker").
Consulta Librerie nell'API Maps JavaScript.
Costanti | |
|---|---|
OPTIONAL_AND_HIDES_LOWER_PRIORITY |
Mostra il marcatore solo se non si sovrappone ad altri marcatori. Se due indicatori di questo tipo si sovrappongono, viene visualizzato quello con zIndex più elevato. Se hanno lo stesso zIndex, viene visualizzato quello con la posizione verticale sullo schermo più bassa. |
REQUIRED |
Visualizza sempre il marcatore indipendentemente dalla collisione. Questo è il comportamento predefinito. |
REQUIRED_AND_HIDES_OPTIONAL |
Mostra sempre il marcatore indipendentemente dalla collisione e nascondi eventuali marcatori o etichette OPTIONAL_AND_HIDES_LOWER_PRIORITY che si sovrappongono al marcatore. |
Icona interfaccia
google.maps.Icon
interfaccia
Una struttura che rappresenta un'immagine dell'icona Marcatore.
Proprietà | |
|---|---|
url |
Tipo:
stringL'URL dell'immagine o dello Sprite Sheet. |
anchor optional |
Tipo:
Point optionalLa posizione in cui ancorare un'immagine in corrispondenza della posizione dell'indicatore sulla mappa. Per impostazione predefinita, l'ancora si trova lungo il punto centrale della parte inferiore dell'immagine. |
labelOrigin optional |
Tipo:
Point optionalL'origine dell'etichetta rispetto all'angolo in alto a sinistra dell'immagine dell'icona, se l'etichetta viene fornita dal marcatore. Per impostazione predefinita, l'origine si trova al centro dell'immagine. |
origin optional |
Tipo:
Point optionalLa posizione dell'immagine all'interno di uno sprite, se presente. Per impostazione predefinita, l'origine si trova nell'angolo in alto a sinistra dell'immagine (0, 0). |
scaledSize optional |
Tipo:
Size optionalLe dimensioni dell'intera immagine dopo il ridimensionamento, se presente. Utilizza questa proprietà per allungare/restringere un'immagine o uno sprite. |
size optional |
Tipo:
Size optionalLe dimensioni di visualizzazione dello sprite o dell'immagine. Quando utilizzi gli sprite, devi specificarne le dimensioni. Se le dimensioni non vengono fornite, verranno impostate al caricamento dell'immagine. |
Interfaccia MarkerLabel
google.maps.MarkerLabel
interfaccia
Queste opzioni specificano l'aspetto di un'etichetta del marcatore. Un'etichetta del marcatore è una stringa (spesso un singolo carattere) che viene visualizzata all'interno del marcatore. Se lo utilizzi con un indicatore personalizzato, puoi riposizionarlo con la proprietà labelOrigin nella classe Icon.
Proprietà | |
|---|---|
text |
Tipo:
stringIl testo da visualizzare nell'etichetta. |
className optional |
Tipo:
string optionalPredefinito:
'' (stringa vuota)La proprietà className dell'elemento dell'etichetta (equivalente all'attributo class dell'elemento). È possibile aggiungere più classi CSS separate da spazi. Il colore, la dimensione, il peso e la famiglia di caratteri possono essere impostati solo tramite le altre proprietà di MarkerLabel. Le classi CSS non devono essere utilizzate per modificare la posizione o l'orientamento dell'etichetta (ad es. utilizzando traslazioni e rotazioni) se viene utilizzato anche Gestione della collisione dei marcatori. |
color optional |
Tipo:
string optionalPredefinito:
'black'Il colore del testo dell'etichetta. |
fontFamily optional |
Tipo:
string optionalLa famiglia di caratteri del testo dell'etichetta (equivalente alla proprietà CSS font-family). |
fontSize optional |
Tipo:
string optionalPredefinito:
'14px'Le dimensioni del carattere del testo dell'etichetta (equivalenti alla proprietà CSS font-size). |
fontWeight optional |
Tipo:
string optionalLo spessore del carattere del testo dell'etichetta (equivalente alla proprietà CSS font-weight). |
Interfaccia MarkerShape
google.maps.MarkerShape
interfaccia
Questo oggetto definisce la regione cliccabile di un'immagine del marcatore. La forma è costituita da due proprietà, type e coord, che definiscono la regione non trasparente di un'immagine.
Proprietà | |
|---|---|
type |
Tipo:
stringDescrive il tipo di forma e può essere circle, poly o rect. |
coords optional |
Tipo:
Array<number> optionalIl formato di questo attributo dipende dal valore di type e segue la specifica w3 AREA coords disponibile all'indirizzo http://www.w3.org/TR/REC-html40/struct/objects.html#adef-coords. L'attributo coords è un array di numeri interi che specificano la posizione in pixel della forma rispetto all'angolo in alto a sinistra dell'immagine di destinazione. Le coordinate dipendono dal valore di type come segue: - circle: coords è [x1,y1,r] dove x1,y2 sono le coordinate del centro del cerchio e r è il raggio del cerchio. - poly: coords è [x1,y1,x2,y2...xn,yn], dove ogni coppia x,y contiene le coordinate di un vertice del poligono. - rect: coords è [x1,y1,x2,y2], dove x1,y1 sono le coordinate dell'angolo in alto a sinistra del rettangolo e x2,y2 sono le coordinate dell'angolo in basso a destra del rettangolo. |
Simbolo interfaccia
google.maps.Symbol
interfaccia
Descrive un simbolo, costituito da un percorso vettoriale con uno stile. Un simbolo può essere utilizzato come icona di un indicatore o posizionato su una polilinea.
Proprietà | |
|---|---|
path |
Tipo:
SymbolPath|stringIl percorso del simbolo, che è un percorso del simbolo integrato o un percorso personalizzato espresso utilizzando la notazione del percorso SVG. Obbligatorio. |
anchor optional |
Tipo:
Point optionalPredefinito:
google.maps.Point(0,0)La posizione del simbolo rispetto al marcatore o alla polilinea. Le coordinate del percorso del simbolo vengono traslate a sinistra e in alto rispettivamente dalle coordinate x e y dell'ancora. La posizione è espressa nello stesso sistema di coordinate del percorso del simbolo. |
fillColor optional |
Tipo:
string optionalIl colore di riempimento del simbolo. Sono supportati tutti i colori CSS3, ad eccezione dei colori denominati estesi. Per i marcatori di simboli, il valore predefinito è "nero". Per i simboli sulle polilinee, il valore predefinito è il colore del tratto della polilinea corrispondente. |
fillOpacity optional |
Tipo:
number optionalPredefinito:
0L'opacità del riempimento del simbolo. |
labelOrigin optional |
Tipo:
Point optionalPredefinito:
google.maps.Point(0,0)L'origine dell'etichetta rispetto all'origine del percorso, se l'etichetta viene fornita dal marcatore. L'origine è espressa nello stesso sistema di coordinate del percorso del simbolo. Questa proprietà non viene utilizzata per i simboli sulle polilinee. |
rotation optional |
Tipo:
number optionalPredefinito:
0L'angolo di rotazione del simbolo, espresso in senso orario in gradi. Un simbolo in un IconSequence in cui fixedRotation è false viene ruotato rispetto all'angolo del bordo su cui si trova. |
scale optional |
Tipo:
number optionalLa quantità in base alla quale viene ridimensionato il simbolo. Per i marcatori di simboli, il valore predefinito è 1; dopo il ridimensionamento, il simbolo può avere qualsiasi dimensione. Per i simboli su una polilinea, questo valore corrisponde allo spessore del tratto della polilinea; dopo il ridimensionamento, il simbolo deve trovarsi all'interno di un quadrato di 22 pixel di lato centrato sull'ancoraggio del simbolo. |
strokeColor optional |
Tipo:
string optionalIl colore del tratto del simbolo. Sono supportati tutti i colori CSS3, ad eccezione dei colori denominati estesi. Per i marcatori di simboli, il valore predefinito è "nero". Per i simboli su una polilinea, il valore predefinito è il colore del tratto della polilinea. |
strokeOpacity optional |
Tipo:
number optionalL'opacità del tratto del simbolo. Per i marcatori di simboli, il valore predefinito è 1. Per i simboli su una polilinea, il valore predefinito è l'opacità del tratto della polilinea. |
strokeWeight optional |
Tipo:
number optionalPredefinito:il
Symbol.scale del simbolo.Lo spessore tratto del simbolo. |
SymbolPath costanti
google.maps.SymbolPath
costanti
Percorsi dei simboli integrati.
Accesso chiamando il numero const {SymbolPath} = await google.maps.importLibrary("core").
Consulta Librerie nell'API Maps JavaScript.
Costanti | |
|---|---|
BACKWARD_CLOSED_ARROW |
Una freccia chiusa rivolta verso sinistra. |
BACKWARD_OPEN_ARROW |
Una freccia aperta rivolta all'indietro. |
CIRCLE |
Un cerchio. |
FORWARD_CLOSED_ARROW |
Una freccia chiusa rivolta in avanti. |
FORWARD_OPEN_ARROW |
Una freccia aperta rivolta in avanti. |
Animation constants
google.maps.Animation
costanti
Animazioni che possono essere riprodotte su un marcatore. Utilizza il metodo Marker.setAnimation su Marcatore o l'opzione MarkerOptions.animation per riprodurre un'animazione.
Accesso chiamando il numero const {Animation} = await google.maps.importLibrary("marker").
Consulta Librerie nell'API Maps JavaScript.
Costanti | |
|---|---|
BOUNCE |
Il marcatore rimbalza finché l'animazione non viene interrotta chiamando Marker.setAnimation con null. |
DROP |
L'indicatore scende dalla parte superiore della mappa fino alla sua posizione finale. L'animazione si interromperà quando il marcatore si fermerà e Marker.getAnimation tornerà a null. Questo tipo di animazione viene solitamente specificato durante la creazione del marcatore. |