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 un LatLng che identifica la posizione iniziale del marcatore. Un modo per recuperare un LatLng è utilizzare il servizio di geocodifica.
• map (facoltativo) specifica il Map 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 “s setMap().

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 e animation tornerà a null. Questo tipo di animazione viene solitamente specificato durante la creazione del Marker.
• BOUNCE indica che l’indicatore deve rimbalzare posto. Un indicatore di rimbalzo continuerà a rimbalzare finché la sua proprietà animation non viene impostata esplicitamente su null.

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.