Marker

Classe Marker

google.maps.Marker corso

Questa lezione si estende a MVCObject.

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

Costruttore
Marker	Marker([opts]) Parametri:  opts:  MarkerOptions optional argomenti facoltativi con nome Crea un indicatore con le opzioni specificate. Se viene specificata una mappa, l'indicatore viene aggiunto alla mappa in fase di costruzione. Tieni presente che la posizione deve essere impostata affinché l'indicatore venga visualizzato.

Metodi
getAnimation	getAnimation() Parametri: nessuna Valore restituito:  Animation|null|undefined Scarica l'animazione attualmente in esecuzione.
getClickable	getClickable() Parametri: nessuna Valore restituito:  boolean True se l'indicatore è cliccabile. Visualizza lo stato selezionabile di Marker.
getCursor	getCursor() Parametri: nessuna Valore restituito:  string|null|undefined Visualizza il tipo di cursore del mouse mostrato al passaggio del mouse.
getDraggable	getDraggable() Parametri: nessuna Valore restituito:  boolean True se l'indicatore è trascinabile. Visualizza lo stato trascinabile di Marker.
getIcon	getIcon() Parametri: nessuna Valore restituito:  string|Icon|Symbol|null|undefined Visualizza l'icona di Marker. Leggi i MarkerOptions.icon.
getLabel	getLabel() Parametri: nessuna Valore restituito:  MarkerLabel|string|null|undefined Ottieni l'etichetta di Marker. Leggi i MarkerOptions.label.
getMap	getMap() Parametri: nessuna Valore restituito:  Map|StreetViewPanorama Scarica la mappa o il panaroama su cui viene eseguito il rendering. Marker
getOpacity	getOpacity() Parametri: nessuna Valore restituito:  number|null|undefined un numero compreso tra 0,0 e 1,0. Recupera l'opacità del Marker.
getPosition	getPosition() Parametri: nessuna Valore restituito:  LatLng|null|undefined Ottieni la posizione di Marker.
getShape	getShape() Parametri: nessuna Valore restituito:  MarkerShape|null|undefined Ottieni la forma di Marker utilizzata per l'interazione. Leggi i MarkerOptions.shape e la MarkerShape.
getTitle	getTitle() Parametri: nessuna Valore restituito:  string|null|undefined Ottieni il titolo della descrizione comando di Marker. Leggi i MarkerOptions.title.
getVisible	getVisible() Parametri: nessuna Valore restituito:  boolean True se l'indicatore è visibile. Ottieni la visibilità di Marker.
getZIndex	getZIndex() Parametri: nessuna Valore restituito:  number|null|undefined z-index dell'indicatore. Visualizza lo zIndex di Marker. Leggi i MarkerOptions.zIndex.
setAnimation	setAnimation([animation]) Parametri:  animation:  Animation optional l'animazione da riprodurre. Valore restituito: nessuno Avvia un'animazione. Eventuali animazioni in corso verranno annullate. Le animazioni attualmente supportate sono: Animation.BOUNCE, Animation.DROP. Se passi null, l'animazione si interromperà.
setClickable	setClickable(flag) Parametri:  flag:  boolean se true, è possibile fare clic sull'indicatore. Valore restituito: nessuno Imposta se Marker è cliccabile.
setCursor	setCursor([cursor]) Parametri:  cursor:  string optional tipo di cursore del mouse. Valore restituito: nessuno Imposta il tipo di cursore del mouse mostrato al passaggio del mouse.
setDraggable	setDraggable(flag) Parametri:  flag:  boolean optional se true, è possibile trascinare l'indicatore. Valore restituito: nessuno Imposta se Marker è trascinabile.
setIcon	setIcon([icon]) Parametri:  icon:  string|Icon|Symbol optional Valore restituito: nessuno Imposta l'icona di Marker. Leggi i MarkerOptions.icon.
setLabel	setLabel([label]) Parametri:  label:  string|MarkerLabel optional l'etichetta può essere una stringa di caratteri o un oggetto MarkerLabel. Valore restituito: nessuno Imposta l'etichetta per Marker. Leggi i MarkerOptions.label.
setMap	setMap(map) Parametri:  map:  Map|StreetViewPanorama Valore restituito: nessuno Consente di visualizzare Marker sulla mappa o sulla panoramica specificata. Se la mappa è impostata su null, l'indicatore verrà rimosso.
setOpacity	setOpacity([opacity]) Parametri:  opacity:  number optional un numero compreso tra 0,0, trasparente e 1,0, opaco. Valore restituito: nessuno Imposta l'opacità della Marker.
setOptions	setOptions(options) Parametri:  options:  MarkerOptions Valore restituito: nessuno Imposta le opzioni per Marker.
setPosition	setPosition([latlng]) Parametri:  latlng:  LatLng|LatLngLiteral optional la nuova posizione. Valore restituito: nessuno Imposta il posizionamento per Marker.
setShape	setShape([shape]) Parametri:  shape:  MarkerShape optional Valore restituito: nessuno Imposta la forma di Marker utilizzata per l'interazione. Leggi i MarkerOptions.shape e la MarkerShape.
setTitle	setTitle([title]) Parametri:  title:  string optional Valore restituito: nessuno Imposta il titolo della descrizione comando Marker. Leggi i MarkerOptions.title.
setVisible	setVisible(visible) Parametri:  visible:  boolean se true, l'indicatore è visibile Valore restituito: nessuno Imposta se Marker è visibile.
setZIndex	setZIndex([zIndex]) Parametri:  zIndex:  number optional Valore restituito: nessuno Imposta lo zIndex di Marker. Leggi i MarkerOptions.zIndex.
Ereditato: addListener, bindTo, get, notify, set, setValues, unbind, unbindAll

Costanti
MAX_ZINDEX	Lo z-index massimo predefinito che l'API assegnerà a un indicatore. Puoi impostare uno z-index più elevato per portare un indicatore in primo piano.

Eventi
animation_changed	function() Argomenti: nessuna Questo evento viene attivato quando la proprietà di animazione Marker cambia.
click	function(event) Argomenti:  event:  MapMouseEvent Questo evento viene attivato quando viene fatto clic sull'icona Marker.
clickable_changed	function() Argomenti: nessuna Questo evento viene attivato quando la proprietà cliccabile Marker cambia.
contextmenu	function(event) Argomenti:  event:  MapMouseEvent Questo evento viene attivato quando l'evento del menu contestuale DOM viene attivato sul Marker
cursor_changed	function() Argomenti: nessuna Questo evento viene attivato quando la proprietà del cursore Marker cambia.
dblclick	function(event) Argomenti:  event:  MapMouseEvent Questo evento viene attivato quando viene fatto doppio clic sull'icona di Marker.
drag	function(event) Argomenti:  event:  MapMouseEvent Questo evento viene attivato ripetutamente mentre l'utente trascina Marker.
dragend	function(event) Argomenti:  event:  MapMouseEvent Questo evento viene attivato quando l'utente smette di trascinare Marker.
draggable_changed	function() Argomenti: nessuna Questo evento viene attivato quando la proprietà trascinabile di Marker viene modificata.
dragstart	function(event) Argomenti:  event:  MapMouseEvent Questo evento viene attivato quando l'utente inizia a trascinare Marker.
flat_changed	function() Argomenti: nessuna Questo evento viene attivato quando la proprietà piatta Marker cambia.
icon_changed	function() Argomenti: nessuna Questo evento viene attivato quando la proprietà dell'icona Marker cambia.
mousedown	function(event) Argomenti:  event:  MapMouseEvent Questo evento viene attivato per un mousedown sulla Marker.
mouseout	function(event) Argomenti:  event:  MapMouseEvent Questo evento viene attivato quando il mouse lascia l'area dell'icona di Marker.
mouseover	function(event) Argomenti:  event:  MapMouseEvent Questo evento viene attivato quando il puntatore del mouse entra nell'area dell'icona di Marker.
mouseup	function(event) Argomenti:  event:  MapMouseEvent Questo evento viene attivato per un mouseup su Marker.
position_changed	function() Argomenti: nessuna Questo evento viene attivato quando la proprietà di posizione Marker cambia.
shape_changed	function() Argomenti: nessuna Questo evento viene attivato quando la proprietà della forma Marker viene modificata.
title_changed	function() Argomenti: nessuna Questo evento viene attivato quando la proprietà title Marker cambia.
visible_changed	function() Argomenti: nessuna Questo evento viene attivato quando la proprietà visibile Marker cambia.
zindex_changed	function() Argomenti: nessuna Questo evento viene attivato quando la proprietà Marker zIndex cambia.
rightclick	Obsoleto: utilizza invece l'evento Marker.contextmenu per supportare pattern di utilizzo come clic di controllo e macOS. function(event) Argomenti:  event:  MapMouseEvent Questo evento viene attivato per un clic con il tasto destro del mouse su Marker.

Interfaccia MarkerOptions

Interfaccia google.maps.MarkerOptions

Oggetto MarkerOptions utilizzato per definire le proprietà che possono essere impostate su un indicatore.

Proprietà
anchorPoint optional	Tipo:  Point optional La differenza tra la posizione dell'indicatore e la punta di un'infoInfo che è stata aperta con l'indicatore come ancoraggio.
animation optional	Tipo:  Animation optional Predefinito: null Animazione da riprodurre quando viene aggiunto un indicatore a una mappa.
clickable optional	Tipo:  boolean optional Predefinito: true Se true, l'indicatore riceve eventi mouse e tocco.
collisionBehavior optional	Ritirato: collisionBehavior è stato ritirato a luglio 2023. Utilizza invece AdvancedMarkerElement.collisionBehavior. Avviso:disponibile solo nel canale v=beta. Tipo:  string|CollisionBehavior optional Predefinito: null Imposta un comportamento di collisione per gli indicatori sulle mappe vettoriali.
crossOnDrag optional	Tipo:  boolean optional Predefinito: true Se false, disattiva la croce che appare sotto l'indicatore quando trascini.
cursor optional	Tipo:  string optional Predefinito: pointer Tipo di cursore del mouse da mostrare al passaggio del mouse.
draggable optional	Tipo:  boolean optional Predefinito: false Se true, l'indicatore può essere trascinato.
icon optional	Tipo:  string|Icon|Symbol optional Icona per il primo piano. Se viene fornita una stringa, viene considerata come se fosse un Icon con la stringa come url.
label optional	Tipo:  string|MarkerLabel optional Predefinito: null Aggiunge un'etichetta all'indicatore. Un'etichetta di indicatore è una lettera o un numero che compare all'interno di un indicatore. L'etichetta può essere una stringa o un oggetto MarkerLabel. Se non viene indicato e il criterio MarkerOptions.title non viene fornito, un testo di accessibilità (ad es. da utilizzare con gli screen reader) verrà aggiunto all'indicatore con il testo dell'etichetta fornita. Tieni presente che al momento label viene utilizzato solo per il testo sull'accessibilità per gli indicatori non ottimizzati.
map optional	Tipo:  Map|StreetViewPanorama optional Mappa su cui mostrare l'indicatore. La mappa è necessaria per visualizzare l'indicatore e può essere fornita con Marker.setMap se non è in fase di creazione dell'indicatore.
opacity optional	Tipo:  number optional Predefinito: 1,0 Un numero compreso tra 0,0, trasparente e 1,0, opaco.
optimized optional	Tipo:  boolean optional L'ottimizzazione migliora le prestazioni visualizzando molti indicatori come un singolo elemento statico. Questa opzione è utile nei casi in cui sia richiesto un numero elevato di indicatori. Scopri di più sull'ottimizzazione degli indicatori.
position optional	Tipo:  LatLng|LatLngLiteral optional Imposta la posizione dell'indicatore. Un indicatore può essere creato, ma non visualizzato, finché la sua posizione non viene fornita, ad esempio in base alle azioni o alle scelte dell'utente. Se non viene fornito in corrispondenza dell'indicatore, la posizione dell'indicatore può essere specificata con Marker.setPosition.
shape optional	Tipo:  MarkerShape optional Definizione della regione della mappa immagine utilizzata per il trascinamento.
title optional	Tipo:  string optional Predefinito: undefined Testo rollover. Se fornito, verrà aggiunto all'indicatore un testo di accessibilità (ad esempio da usare con gli screen reader) con il valore fornito. Tieni presente che al momento title viene utilizzato solo per il testo sull'accessibilità per gli indicatori non ottimizzati.
visible optional	Tipo:  boolean optional Predefinito: true Se true, l'indicatore è visibile.
zIndex optional	Tipo:  number optional Tutti gli indicatori vengono visualizzati sulla mappa in ordine di zindex, con valori più alti mostrati davanti agli indicatori con valori più bassi. Per impostazione predefinita, gli indicatori vengono visualizzati in base alla posizione verticale sullo schermo; gli indicatori più in basso vengono visualizzati davanti agli indicatori più in alto sullo schermo.

Costanti di collisionBehavior

google.maps.CollisionBehavior costanti

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

Costanti
OPTIONAL_AND_HIDES_LOWER_PRIORITY	Visualizza l'indicatore solo se non è sovrapposto ad altri indicatori. Se si sovrappongono due indicatori di questo tipo, viene visualizzato quello con l'indice z più elevato. Se hanno lo stesso zIndex, viene mostrato quello con la posizione verticale sullo schermo inferiore.
REQUIRED	Visualizza sempre l'indicatore indipendentemente dalle collisioni. Questo è il comportamento predefinito.
REQUIRED_AND_HIDES_OPTIONAL	Visualizza sempre l'indicatore indipendentemente dalle collisioni e nascondi eventuali indicatori o etichette OPTIONAL_AND_HIDES_LOWER_PRIORITY che si sovrappongono all'indicatore.

Interfaccia icona

Interfaccia google.maps.Icon

Una struttura che rappresenta un'immagine dell'icona dell'indicatore.

Proprietà
url	Tipo:  string L'URL del foglio immagine o sprite.
anchor optional	Tipo:  Point optional La posizione in cui ancorare un'immagine in corrispondenza della posizione dell'indicatore sulla mappa. Per impostazione predefinita, l'ancoraggio si trova lungo il punto centrale della parte inferiore dell'immagine.
labelOrigin optional	Tipo:  Point optional L'origine dell'etichetta rispetto all'angolo in alto a sinistra dell'immagine icona, se un'etichetta è fornita dall'indicatore. Per impostazione predefinita, l'origine si trova nel punto centrale dell'immagine.
origin optional	Tipo:  Point optional La 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 optional Le dimensioni dell'intera immagine dopo la scalabilità, se presenti. Utilizza questa proprietà per estendere/stringere un'immagine o uno sprite.
size optional	Tipo:  Size optional Le dimensioni di visualizzazione dello sprite o dell'immagine. Quando utilizzi gli sprite, devi specificare le dimensioni dello sprite. Se le dimensioni non vengono specificate, verranno impostate al caricamento dell'immagine.

Interfaccia MarkerLabel

Interfaccia google.maps.MarkerLabel

Queste opzioni specificano l'aspetto dell'etichetta di un indicatore. Un'etichetta dell'indicatore è una stringa (spesso di un solo carattere) che viene visualizzata all'interno dell'indicatore. Se lo utilizzi con un indicatore personalizzato, puoi riposizionarlo con la proprietà labelOrigin nella classe Icon.

Proprietà
text	Tipo:  string Il testo da visualizzare nell'etichetta.
className optional	Tipo:  string optional Predefinito: '' (stringa vuota) La proprietà className dell'elemento dell'etichetta (equivalente all'attributo classe dell'elemento). Puoi aggiungere più classi CSS separate da spazi. Il colore, le dimensioni, lo spessore e la famiglia del carattere possono essere impostati solo tramite le altre proprietà di MarkerLabel. Le classi CSS non devono essere usate per cambiare la posizione o l'orientamento dell'etichetta (ad esempio usando traduzioni e rotazioni) se utilizzi anche la gestione degli collisori.
color optional	Tipo:  string optional Predefinito: 'black' Il colore del testo dell'etichetta.
fontFamily optional	Tipo:  string optional La famiglia di caratteri del testo dell'etichetta (equivale alla proprietà CSS-famiglia).
fontSize optional	Tipo:  string optional Predefinito: '14px' La dimensione del carattere del testo dell'etichetta (equivalente alla proprietà delle dimensioni del carattere CSS).
fontWeight optional	Tipo:  string optional Lo spessore del carattere del testo dell'etichetta (equivalente alla proprietà spessore carattere CSS).

Interfaccia MarkerShape

Interfaccia google.maps.MarkerShape

Questo oggetto definisce la regione cliccabile di un'immagine indicatore. La forma è composta da due proprietà, type e coord, che definiscono la regione non trasparente di un'immagine.

Proprietà
coords	Tipo:  Array<number> Il 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: i coordi sono [x1,y1,r], dove x1,y2 sono le coordinate del centro del cerchio, mentre r è il raggio del cerchio. - poly: i coorti sono [x1,y1,x2,y2...xn,yn], dove ogni coppia x,y contiene le coordinate di un vertice del poligono. - rect: i coords sono [x1,y1,x2,y2], dove x1,y1 sono le coordinate dell'angolo in alto a sinistra del rettangolo e x2,y2 sono le coordinate delle coordinate in basso a destra del rettangolo.
type	Tipo:  string Descrive il tipo della forma e può essere circle, poly o rect.

Interfaccia Simbolo

Interfaccia google.maps.Symbol

Descrive un simbolo, costituito da un percorso vettore con stile. È possibile utilizzare un simbolo come icona di un indicatore o posizionato su una polilinea.

Proprietà
path	Tipo:  SymbolPath|string Percorso del simbolo, vale a dire un percorso di simbolo integrato o percorso personalizzato espresso tramite notazione di percorso SVG. Obbligatorio.
anchor optional	Tipo:  Point optional Predefinito: google.maps.Point(0,0) La posizione del simbolo rispetto all'indicatore o alla polilinea. Le coordinate del percorso del simbolo vengono tradotte rispettivamente verso sinistra e verso l'alto dalle coordinate x e y dell'ancoraggio. La posizione è espressa nello stesso sistema di coordinate del percorso del simbolo.
fillColor optional	Tipo:  string optional Il colore di riempimento del simbolo. Sono supportati tutti i colori CSS3, ad eccezione dei colori con nome estesi. Per gli indicatori di simbolo, il valore predefinito è "nero". Per i simboli sulle polilinee, il valore predefinito è il colore del tratto della polilinea corrispondente.
fillOpacity optional	Tipo:  number optional Predefinito: 0 L'opacità del riempimento del simbolo.
labelOrigin optional	Tipo:  Point optional Predefinito: google.maps.Point(0,0) L'origine dell'etichetta rispetto all'origine del percorso, se è fornita dall'indicatore. L'origine è espressa nello stesso sistema di coordinate del percorso del simbolo. Questa proprietà non è utilizzata per i simboli sulle polilinee.
rotation optional	Tipo:  number optional Predefinito: 0 L'angolo di cui ruotare il simbolo, espresso in gradi in senso orario. Un simbolo in una IconSequence dove fixedRotation è false viene ruotato rispetto all'angolo del bordo su cui si trova.
scale optional	Tipo:  number optional L'importo in base al quale le dimensioni del simbolo vengono ridimensionate. Per gli indicatori di simbolo, il valore predefinito è 1; dopo aver scalato, il simbolo può essere di qualsiasi dimensione. Per i simboli su una polilinea, il valore predefinito è il peso del tratto della polilinea. Dopo aver scalato, il simbolo deve trovarsi all'interno di una dimensione quadrata di 22 pixel centrata sull'ancoraggio del simbolo.
strokeColor optional	Tipo:  string optional Il colore del tratto del simbolo. Sono supportati tutti i colori CSS3, ad eccezione dei colori con nome estesi. Per gli indicatori di simbolo, il valore predefinito è "nero". Per i simboli su una polilinea, viene usato per impostazione predefinita il colore del tratto della polilinea.
strokeOpacity optional	Tipo:  number optional L'opacità del tratto del simbolo. Per gli indicatori di simbolo, il valore predefinito è 1. Per i simboli su una polilinea, viene utilizzata per impostazione predefinita l'opacità del tratto della polilinea.
strokeWeight optional	Tipo:  number optional Predefinito: il valore Symbol.scale del simbolo. Il peso del tratto del simbolo.

Costanti di SimboloPercorso

google.maps.SymbolPath costanti

Percorsi di simboli integrati.

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

Costanti
BACKWARD_CLOSED_ARROW	Una freccia chiusa rivolta all'indietro.
BACKWARD_OPEN_ARROW	Una freccia aperta rivolta verso l'alto.
CIRCLE	Un cerchio.
FORWARD_CLOSED_ARROW	Una freccia chiusa rivolta in avanti.
FORWARD_OPEN_ARROW	Una freccia aperta rivolta verso l'alto.

Costanti di animazione

google.maps.Animation costanti

Animazioni che possono essere riprodotte su un pennarello. Usa il metodo Marker.setAnimation sull'indicatore o l'opzione MarkerOptions.animation per riprodurre un'animazione.

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

Costanti
BOUNCE	L'indicatore viene restituito al mittente fino a quando l'animazione non viene interrotta chiamando Marker.setAnimation con null.
DROP	L'indicatore scende dalla parte superiore della mappa alla sua posizione finale. L'animazione cesserà una volta che l'indicatore si fermerà e Marker.getAnimation restituirà null. Questo tipo di animazione viene solitamente specificato durante la creazione dell'indicatore.