JavaScript  »  Articoli  »  Effetti e controlli Javascript 

Directions

Sicuramente una delle funzionalità più interessanti delle API V.3 è directions, che consente il calcolo del percorso tra due località e la visualizzazione sulla mappa con un disegno polyline in aggiunta a una serie di marker con descrizione testuale.

Il supporto a directions è possibile attraverso due nuove classi, DirectionsRenderer e DirectionsService, fondamentalmente una delegata alla visualizzazione, l'altra allo svolgimento del calcolo delle direzioni.

Creata una nuova istanza della classe DirectionsService, è necessario effettuare una richiesta tramite il metodo DirectionsService.route() che opera con modalità simili a quelle viste per Geocoder.geocode(): sono necessari due argomenti, il letterale DirectionsRequest e la funzione di callback eseguita appena la richiesta è stata completata. L'oggetto DirectionsRequest può contenere le seguenti proprietà:

• origin (obbligatorio) specifica l'indirizzo di partenza da cui calcolare il percorso.
• destination (obbligatorio) specifica l'indirizzo di arrivo del percorso: origin e destination possono essere valori specificati come una stringa (ad esempio, "Roma, via dei Condotti") o come un oggetto latLng.
• travelMode (obbligatorio) specifica la modalità di trasporto (DRIVING o WALKING).
• waypoint [] (opzionale) specifica un array (DirectionsWaypoints) di punti di passaggio obbligati nel calcolo del percorso.

La funzione di callback restituisce un codice DirectionsStatus con l'esito della richiesta e un oggetto in formato JSON, DirectionsResult, che presenta una struttura articolata contenente le indicazioni per la localizzazione dei punti di arrivo e partenza (oltre ad altre informazioni come ad esempio la durata e la lunghezza del percorso).

A questo punto è necessario inizializzare l'altra classe, DirectionsRenderer. La nuova istanza deve essere associata tramite il metodo setMap() ad una mappa nella pagina creata con le normali modalità. Infine sempre su questa istanza è necessario invocare un ulteriore metodo, che accetta come argomento l'oggetto della risposta DirectionsResult e che si occupa di disegnare il percorso sulla mappa: si tratta di setDirections().

Un esempio e l'esame del codice rende più semplice la comprensione del funzionamento dello script. Tramite il metodo setPanel() è possibile visualizzare indicazioni testuali del percorso in un div appositamente inserito nella pagina: ecco l'ultimo esempio con una variante per il calcolo di un tragitto pedonale.

Conclusioni

L'implementazione di Google maps tramite le nuove API V.3 offre l'opportunità di sperimentare una metodologia di programmazione molto logica ed efficace, un codice snello e modulare che mostra appieno tutti i vantaggi della programmazione orientata agli oggetti: nella pratica il tutto agevola la scala di apprendimento e conseguentemente si traduce in una ancora maggiore semplicità di utilizzo rispetto alla vecchia versione.

Il codice e gli esempi sono disponibili per il download.

Altri articoli

Altre guide

Altre newsletter