Marker

Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.

lezione Marker

lezione google.maps.Marker

Questo corso estende MVCObject.

Quando usi v=beta, puoi accedervi chiamando const {Marker} = await google.map.importLibrary("marker"). Consulta la sezione Librerie nell'API Maps JavaScript.
Marker
Marker([opts])
Parametri:
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.
getAnimation
getAnimation()
Parametri: nessuno
Valore restituito: Animation|null|undefined
Scarica l'animazione attualmente in esecuzione.
getClickable
getClickable()
Parametri: nessuno
Valore restituito: boolean True se l'indicatore è cliccabile.
Visualizza lo stato selezionabile di Marker.
getCursor
getCursor()
Parametri: nessuno
Valore restituito: string|null|undefined
Visualizza il tipo di cursore del mouse mostrato al passaggio del mouse.
getDraggable
getDraggable()
Parametri: nessuno
Valore restituito: boolean True se l'indicatore è trascinabile.
Visualizza lo stato trascinabile di Marker.
getIcon
getIcon()
Parametri: nessuno
Valore restituito: string|Icon|null|Symbol|undefined
Visualizza l'icona di Marker. Leggi i MarkerOptions.icon.
getLabel
getLabel()
Parametri: nessuno
Valore restituito: MarkerLabel|null|string|undefined
Ottieni l'etichetta Marker. Leggi i MarkerOptions.label.
getMap
getMap()
Parametri: nessuno
Valore restituito: Map|StreetViewPanorama
Ottieni la mappa o il panaroama su cui viene eseguito il rendering di Marker.
getOpacity
getOpacity()
Parametri: nessuno
Valore restituito: number|null|undefined un numero compreso tra 0,0 e 1,0.
Recupera l'opacità del Marker.
getPosition
getPosition()
Parametri: nessuno
Valore restituito: LatLng|null|undefined
Rileva la posizione di Marker.
getShape
getShape()
Parametri: nessuno
Valore restituito: MarkerShape|null|undefined
Visualizza la forma di Marker utilizzata per l'interazione. Leggi i MarkerOptions.shape e la MarkerShape.
getTitle
getTitle()
Parametri: nessuno
Valore restituito: string|null|undefined
Ottieni il titolo della descrizione comando Marker. Leggi i MarkerOptions.title.
getVisible
getVisible()
Parametri: nessuno
Valore restituito: boolean vero se l'indicatore è visibile.
Ottieni la visibilità di Marker.
getZIndex
getZIndex()
Parametri: nessuno
Valore restituito: number|null|undefined z-index dell'indicatore.
Visualizza l'indice z del Marker. Leggi i MarkerOptions.zIndex.
setAnimation
setAnimation([animation])
Parametri:
  • animation:  Animation optional l'animazione da riprodurre.
Valore di restituzione: nessuno
Avvia un'animazione. Eventuali animazioni in corso verranno annullate. Le animazioni attualmente supportate sono: Animation.BOUNCE e Animation.DROP. Il passaggio a null comporterà l'interruzione di qualsiasi animazione.
setClickable
setClickable(flag)
Parametri:
  • flag: boolean se true, puoi fare clic sull'indicatore.
Valore di restituzione: nessuno
Imposta se Marker è selezionabile.
setCursor
setCursor([cursor])
Parametri:
  • cursor:  string optional tipo di cursore del mouse.
Valore di restituzione: nessuno
Imposta il tipo di cursore del mouse mostrato al passaggio del mouse.
setDraggable
setDraggable(flag)
Parametri:
  • flag: boolean optional se true, puoi trascinare l'indicatore.
Valore di restituzione: nessuno
Imposta se il Marker può essere trascinato.
setIcon
setIcon([icon])
Parametri:
Valore di restituzione: 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 di restituzione: nessuno
Imposta l'etichetta per Marker. Leggi i MarkerOptions.label.
setMap
setMap(map)
Parametri:
Valore di restituzione: nessuno
Visualizza la Marker sulla mappa o sul panorama specificati. 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 di restituzione: nessuno
Imposta l'opacità del Marker.
setOptions
setOptions(options)
Parametri:
Valore di restituzione: nessuno
Imposta le opzioni per il Marker.
setPosition
setPosition([latlng])
Parametri:
Valore di restituzione: nessuno
Imposta le posizioni per Marker.
setShape
setShape([shape])
Parametri:
Valore di restituzione: nessuno
Imposta la forma dell'Marker utilizzato per l'interazione. Leggi i MarkerOptions.shape e la MarkerShape.
setTitle
setTitle([title])
Parametri:
  • title: string optional
Valore di restituzione: nessuno
Imposta il titolo della descrizione comando Marker. Leggi i MarkerOptions.title.
setVisible
setVisible(visible)
Parametri:
  • visible: boolean se true, l'indicatore è visibile
Valore di restituzione: nessuno
Imposta se Marker è visibile.
setZIndex
setZIndex([zIndex])
Parametri:
  • zIndex: number optional
Valore di restituzione: nessuno
Imposta lo z-index del Marker. Leggi i MarkerOptions.zIndex.
Ereditata: addListener, bindTo, get, notify, set, setValues, unbind, unbindAll
MAX_ZINDEX Lo z-index massimo predefinito che l'API assegnerà a un indicatore. Puoi impostare uno z-index più alto per portare in primo piano un indicatore.
animation_changed
function()
Argomenti: nessuno
Questo evento viene attivato quando la proprietà dell'animazione Marker cambia.
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 del menu contestuale DOM 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à trascinabile Marker 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à della proprietà Marker cambia.
icon_changed
function()
Argomenti: nessuno
Questo evento viene attivato quando la proprietà dell'icona di Marker cambia.
mousedown
function(event)
Argomenti:
Questo evento viene attivato per un mousedown su Marker.
mouseout
function(event)
Argomenti:
Questo evento viene attivato quando il mouse lascia l'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 sull'evento Marker.
position_changed
function()
Argomenti: nessuno
Questo evento viene attivato quando la proprietà della posizione Marker cambia.
shape_changed
function()
Argomenti: nessuno
Questo evento viene attivato quando la proprietà Marker della forma cambia.
title_changed
function()
Argomenti: nessuno
Questo evento viene attivato quando la proprietà del titolo Marker cambia.
visible_changed
function()
Argomenti: nessuno
Questo evento viene attivato quando la proprietà visibile Marker cambia.
zindex_changed
function()
Argomenti: nessuno
Questo evento viene attivato quando la proprietà z-index Marker cambia.
rightclick
function(event)
Argomenti:
Questo evento viene attivato per un clic con il tasto destro del mouse su Marker.

Interfaccia di MarkerOptions

google.maps.MarkerOptions interfaccia

Oggetto ObjectOptions utilizzato per definire le proprietà che possono essere impostate su un indicatore.
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 indicatore di ancoraggio.
animation optional
Tipo: Animation optional
Predefinito: null
Quale animazione riprodurre quando l'indicatore viene aggiunto a una mappa.
clickable optional
Tipo: boolean optional
Predefinito: true
Se true, l'indicatore riceve eventi mouse e touch.
BetacollisionBehavior optional
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 viene visualizzata sotto l'indicatore durante il trascinamento.
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 una Icon con la stringa come url.
label optional
Tipo: string|MarkerLabel optional
Predefinito: null
Aggiunge un'etichetta all'indicatore. Un'etichetta di un 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 fornito un testo e viene fornito un testo MarkerOptions.title (ad es. per l'utilizzo con gli screen reader) verrà aggiunto all'indicatore con il testo dell'etichetta fornita. Tieni presente che l'label è attualmente utilizzato solo per il testo relativo all'accessibilità per gli indicatori non ottimizzati.
map optional
Tipo: Map|StreetViewPanorama optional
Mappa su cui visualizzare indicatore. La mappa è necessaria per visualizzare l'indicatore e può essere fornito con Marker.setMap se non viene fornito durante la 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 il rendimento eseguendo il rendering di molti indicatori come singolo elemento statico. Ciò è utile nei casi in cui è richiesto un numero elevato di indicatori. Scopri di più sull'ottimizzazione degli indicatori.
position optional
Tipo: LatLng|LatLngLiteral optional
Imposta la posizione dell'indicatore. Può essere creato, ma non visualizzato, finché la sua posizione non è fornita, ad esempio tramite le azioni o le scelte dell'utente. È possibile fornire una posizione a Marker.setPosition se non viene fornito durante la creazione dell'indicatore.
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, il testo di accessibilità (ad es. per l'uso con gli screen reader) verrà aggiunto all'indicatore con il valore fornito. Tieni presente che l'title è attualmente utilizzato solo per il testo relativo all'accessibilità per gli indicatori non ottimizzati.
visible optional
Tipo: boolean optional
Predefinito: true
Se true è visibile, l'indicatore è visibile.
zIndex optional
Tipo: number optional
Tutti gli indicatori sono visualizzati sulla mappa in ordine di z-index, con valori più alti davanti agli indicatori con valori più bassi. Per impostazione predefinita, gli indicatori vengono visualizzati in base alla loro posizione verticale sullo schermo, con indicatori più bassi davanti agli indicatori più avanti sullo schermo.

Costanti di collisione

google.maps.CollisionBehavior costanti

Quando usi v=beta, puoi accedervi chiamando const {CollisionBehavior} = await google.map.importLibrary("marker"). Consulta la sezione Librerie nell'API Maps JavaScript.
OPTIONAL_AND_HIDES_LOWER_PRIORITY Visualizza l'indicatore solo se non si sovrappone ad altri indicatori. Se due indicatori di questo tipo si sovrappongono, viene visualizzato quello con lo z-index più alto. Se hanno lo stesso z-index, viene visualizzata quella con la posizione in verticale più bassa.
REQUIRED Visualizza sempre l'indicatore indipendentemente da collisioni. Questo è il comportamento predefinito.
REQUIRED_AND_HIDES_OPTIONAL Visualizza sempre l'indicatore indipendentemente dalla collisione e nascondi gli indicatori OPTIONAL_AND_HIDES_LOWER_PRIORITY o le etichette che si sovrappongono all'indicatore.

Interfaccia icona

google.maps.Icon interfaccia

Struttura che rappresenta l'immagine di un'icona di un indicatore.
url
Tipo: string
L'URL del foglio immagine o sprite.
anchor optional
Tipo: Point optional
La posizione in cui un'immagine deve essere ancorata 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 dell'icona, se viene 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 l'eventuale scalabilità. Utilizza questa proprietà per estendere o restringere un'immagine o uno sprite.
size optional
Tipo: Size optional
Le dimensioni di visualizzazione dello sprite o dell'immagine. Quando utilizzi sprite, devi specificare le dimensioni degli sprite. Se le dimensioni non vengono fornite, verranno impostate al caricamento dell'immagine.

Interfaccia di MarkerLabel

google.maps.MarkerLabel interfaccia

Queste opzioni specificano l'aspetto di un'etichetta di un indicatore. Un'etichetta di un indicatore è una stringa (spesso di un solo carattere) che compare all'interno dell'indicatore. Se lo utilizzi con un indicatore personalizzato, puoi riposizionarlo con la proprietà labelOrigin nella classe Icon.
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 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. usando traduzioni e rotazioni) se si utilizza anche la gestione degli indicatori di collisione.
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 (equivalente alla famiglia di caratteri CSS).
fontSize optional
Tipo: string optional
Predefinito: '14px'
Le dimensioni del carattere del testo dell'etichetta (equivalente alla proprietà CSS delle dimensioni del carattere).
fontWeight optional
Tipo: string optional
Lo spessore del carattere del testo dell'etichetta (equivalente alla proprietà di ponderazione del carattere CSS).

Interfaccia MarkerShape

google.maps.MarkerShape interfaccia

Questo oggetto definisce la regione selezionabile di un'immagine indicatore. La forma è composta da due proprietà, type e coord, che definiscono la regione non trasparente di un'immagine.
coords
Tipo: Array<number>
Il formato di questo attributo dipende dal valore dell'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 relativa all'angolo in alto a sinistra dell'immagine di destinazione. Le coordinate dipendono dal valore di type, come segue:
- circle: i coord sono [x1,y1,r], dove x1,y2 sono le coordinate del centro del cerchio e r è il raggio del cerchio.
- poly: i coord sono [x1,y1,x2,y2...xn,yn], dove ogni coppia x,y contiene le coordinate di un vertice del poligono.
- rect: i coord sono [x1,y1,x2,y2], dove x1,y1 sono le coordinate dell'angolo superiore sinistro 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

google.maps.Symbol interfaccia

Descrive un simbolo, che consiste in un percorso vettore con uno stile. Puoi utilizzare un simbolo come icona di un indicatore o posizionato su una polilinea.
path
Tipo: SymbolPath|string
Il percorso del simbolo, che è un percorso simbolico integrato o personalizzato espresso con notazione del 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 a sinistra e in 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 simboli, il valore predefinito è "nero". Per i simboli sulle polilinee, il valore predefinito è quello 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 l'etichetta viene 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 IconSequence in cui fixedRotation è false ruotato rispetto all'angolo del bordo su cui si trova.
scale optional
Tipo: number optional
La misura in cui il simbolo viene ridimensionato. Per gli indicatori di simbolo, il valore predefinito è 1; dopo il ridimensionamento, il simbolo può essere di qualsiasi dimensione. Per i simboli su una polilinea, viene utilizzata per impostazione predefinita la ponderazione del tratto della polilinea; dopo il ridimensionamento, il simbolo deve trovarsi all'interno di un quadrato di 22 pixel centrato rispetto all'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 simboli, il valore predefinito è "nero". Per i simboli su una polilinea, il valore predefinito è il colore del tratto di una 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, il valore predefinito è l'opacità del tratto della polilinea.
strokeWeight optional
Tipo: number optional
Predefinita: la Symbol.scale del simbolo.
Il peso del tratto del simbolo.

Costanti di SimboloPath

google.maps.SymbolPath costanti

Percorsi dei simboli integrati.

Quando usi v=beta, puoi accedervi chiamando const {SymbolPath} = await google.map.importLibrary("core"). Consulta la sezione Librerie nell'API Maps JavaScript.
BACKWARD_CLOSED_ARROW Una freccia chiusa rivolta all'indietro.
BACKWARD_OPEN_ARROW Una freccia aperta rivolta all'indietro.
CIRCLE Un cerchio.
FORWARD_CLOSED_ARROW Una freccia chiusa che punta verso l'alto.
FORWARD_OPEN_ARROW Una freccia aperta che punta verso l'alto.

costante di animazione

google.maps.Animation costanti

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

Quando usi v=beta, puoi accedervi chiamando const {Animation} = await google.map.importLibrary("marker"). Consulta la sezione Librerie nell'API Maps JavaScript.
BOUNCE L'indicatore viene restituito al mittente finché 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 ferma e Marker.getAnimation restituirà null. Questo tipo di animazione viene solitamente specificato durante la creazione dell'indicatore.