Indicatori
Introduzione
Un indicatore identifica una posizione su una mappa. Per impostazione predefinita, un indicatore utilizza un’immagine standard. I marcatori possono visualizzare immagini personalizzate, nel qual caso vengono solitamente denominate “icone”. I marcatori e le icone sono oggetti di tipo Marker
. Puoi impostare un’icona personalizzata all’interno del costruttore del marcatore o chiamando setIcon()
sul marcatore. Ulteriori informazioni sulla personalizzazione dell’immagine del marcatore di seguito.
In generale , gli indicatori sono un tipo di sovrapposizione. Per informazioni su altri tipi di sovrapposizione, consulta Disegnare sulla mappa.
Gli indicatori sono progettati per essere interattivi. Ad esempio, per impostazione predefinita ricevono "click"
eventi, quindi puoi aggiungere un listener di eventi per visualizzare una finestra informativa che mostra informazioni personalizzate. Puoi consentire agli utenti di spostare un indicatore sulla mappa impostando l’indicatore “s draggable
a true
. Per ulteriori informazioni sui marker trascinabili, vedere di seguito.
Aggiungi un marker
Il costruttore google.maps.Marker
accetta un singolo Marker options
oggetto letterale, che specifica le proprietà iniziali del marcatore.
I seguenti campi sono particolarmente importanti e comunemente impostati quando si costruisce un marcatore:
-
position
(obbligatorio) specifica unLatLng
che identifica la posizione iniziale del marcatore. Un modo per recuperare unLatLng
è utilizzare il servizio di geocodifica. -
map
(facoltativo) specifica ilMap
su cui posizionare l’indicatore. Se non specifichi la mappa durante la costruzione dell’indicatore, l’indicatore viene creato ma non è attaccato (o visualizzato) sulla mappa. Puoi aggiungere l’indicatore in un secondo momento chiamando l’indicatore “ssetMap()
.
L’esempio seguente aggiunge un semplice indicatore a una mappa a Uluru, nel centro dell’Australia:
Nell’esempio sopra, l’indicatore è posizionato sulla mappa al momento della costruzione dell’indicatore utilizzando la proprietà map
nelle opzioni dell’indicatore. In alternativa, puoi aggiungere l’indicatore direttamente alla mappa utilizzando l’indicatore “s setMap()
, come mostrato nell’esempio seguente:
L’indicatore “s title
verrà visualizzato come descrizione comando.
Se non desideri passare alcun Marker options
nel costruttore del marcatore, passa invece un oggetto vuoto {}
nell’ultimo argomento del costruttore.
Visualizza esempio
Rimuovi un marker
Per rimuovere un marker dalla mappa, chiama setMap()
metodo che passa null
come argomento.
marker.setMap(null);
Tieni presente che quanto sopra il metodo non elimina il marker. Rimuove l’indicatore dalla mappa. Se invece desideri eliminare il marker, dovresti rimuoverlo dalla mappa, quindi impostare il marker stesso su null
.
Se desideri gestire un set di marker, è necessario creare un array per contenere i marker. Utilizzando questo array, puoi quindi chiamare setMap()
su ciascun marker dell’array a turno quando devi rimuovere i marker. Puoi eliminare gli indicatori rimuovendoli dalla mappa e quindi impostando la matrice “s length
su 0
, che rimuove tutti i riferimenti al marcatori.
Visualizza esempio
Animare un marcatore
Puoi animare i marcatori in modo che mostrino movimenti dinamici in una varietà di circostanze diverse. Per specificare il modo in cui un l’indicatore è animato, utilizza la proprietà dell’indicatore “s animation
, di tipo google.maps.Animation
. Sono supportati i seguenti valori Animation
:
-
DROP
indica che l’indicatore deve cadere dalla parte superiore di la mappa nella sua posizione finale quando è stata posizionata per la prima volta sulla mappa. L’animazione terminerà una volta che l’indicatore si ferma eanimation
tornerà anull
. Questo tipo di animazione viene solitamente specificato durante la creazione delMarker
. -
BOUNCE
indica che l’indicatore deve rimbalzare posto. Un indicatore di rimbalzo continuerà a rimbalzare finché la sua proprietàanimation
non viene impostata esplicitamente sunull
.
Tu può avviare un’animazione su un indicatore esistente chiamando setAnimation()
sull’oggetto Marker
.
Se sono presenti molti indicatori , potresti non volerli rilasciare sulla mappa tutti in una volta. Puoi utilizzare setTimeout()
per spaziare le animazioni dei marcatori “utilizzando uno schema come quello mostrato di seguito:
function drop() { for (var i =0; i markerArray.length; i++) { setTimeout(function() { addMarkerMethod(); }, i * 200); }}
Visualizza esempio
Personalizza un’immagine di indicatore
Se desideri visualizzare una lettera o un numero su un indicatore, puoi utilizzare un’etichetta di indicatore.Se hai bisogno di una maggiore personalizzazione, puoi definire un’icona da mostrare al posto dell’immagine del marker predefinita. La definizione di un’icona implica l’impostazione di una serie di proprietà che determinano il comportamento visivo del marker.
Le sezioni seguenti descrivono le etichette dei marker, le icone semplici, le icone complesse e i simboli (icone vettoriali).
Etichette marker
Un’etichetta marker è una lettera o un numero che appare all’interno di un marker. L’immagine del marker in questa sezione mostra un’etichetta del marker con la lettera “B” su di essa. Puoi specificare un’etichetta indicatore come stringa o come oggetto MarkerLabel
che include una stringa e altre proprietà dell’etichetta.
Quando crei un indicatore, puoi specificare un label
nell’oggetto MarkerOptions
. In alternativa, puoi chiamare setLabel()
sull’oggetto Marker per impostare l’etichetta su un indicatore esistente.
L’esempio seguente mostra gli indicatori etichettati quando l’utente fa clic sulla mappa :
Icone semplici
Nel caso più semplice, un’icona può indicare un’immagine da utilizzare al posto dell’icona a forma di puntina predefinita di Google Maps. Per specificare tale icona, imposta la proprietà dell’indicatore “s icon
sull’URL di un’immagine. L’API JavaScript di Maps ridimensionerà l’icona automaticamente.
Icone complesse
Potresti voler specificare forme complesse per indicare regioni cliccabili e specificare come devono apparire le icone rispetto ad altre sovrapposizioni (il loro “ordine di pila”). Le icone specificate in questo modo dovrebbero impostare il loro icon
proprietà a un oggetto di tipo Icon
.
Icon
definizione di oggetti un’immagine. Definiscono anche il size
dell’icona, il origin
dell’icona (se l’immagine che desideri fa parte di un immagine in uno sprite, ad esempio) e anchor
dove deve essere posizionato l’hotspot dell’icona (che si basa sull’origine).
Se tu stai utilizzando un’etichetta con un indicatore personalizzato, puoi posizionare l’etichetta con la proprietà labelOrigin
nella oggetto.
Conversione di MarkerImage
oggetti nel tipo Icon
Fino alla versione 3.10 dell’API JavaScript di Maps, le icone complesse erano definite come oggetti MarkerImage
. Il valore letterale dell’oggetto Icon
è stato aggiunto nella versione 3.10 e sostituisce MarkerImage
dalla versione 3.11 in poi. Icon
letterali oggetto supportano gli stessi parametri di MarkerImage
, consentendoti di convertire facilmente un MarkerImage
a un Icon
rimuovendo il costruttore, racchiudendo i parametri precedenti in {}
“e aggiungendo i nomi di ogni parametro. Ad esempio:
diventa
Simboli
Oltre alle immagini raster, un marker supporta la visualizzazione di percorsi vettoriali denominati Symbols
. Per visualizzare un percorso vettoriale, passa un Symbol
oggetto letterale con il percorso desiderato alla proprietà dell’indicatore “s icon
. Puoi utilizzare uno dei percorsi predefiniti in google.maps.SymbolPath o definire un percorso personalizzato utilizzando la notazione del percorso SVG.
Per ulteriori informazioni, consulta la documentazione per i simboli.
Crea un indicatore trascinabile
Per consentire agli utenti di trascinare un indicatore in una posizione diversa sulla mappa, imposta draggable
su true
nelle opzioni del marker.
Ulteriore personalizzazione del marker
Per un marker completamente personalizzato, vedere l’esempio popup personalizzato.