Un percorso è un tracciato navigabile tra una posizione di partenza, o origine, e una posizione di arrivo, o destinazione. Puoi scegliere di ottenere un percorso per diverse modalità di trasporto, ad esempio a piedi, in bicicletta o con diversi tipi di veicoli. Puoi anche richiedere i dettagli del percorso, come la distanza, il tempo stimato per percorrerlo, i pedaggi previsti e le indicazioni stradali dettagliate.
Visualizza il codice sorgente di esempio completo
Il seguente esempio di codice mostra come ottenere un percorso per le indicazioni stradali tra due località.
TypeScript
// Initialize and add the map. let map: google.maps.Map; let mapPolylines: google.maps.Polyline[] = []; const center = { lat: 37.447646, lng: -122.113878 }; // Palo Alto, CA // Initialize and add the map. async function init(): Promise<void> { // Request the needed libraries. const [{ Map }, { Place }, { Route }] = await Promise.all([ google.maps.importLibrary('maps'), google.maps.importLibrary('places'), google.maps.importLibrary('routes'), ]); map = new Map(document.getElementById('map')!, { zoom: 12, center, mapTypeControl: false, mapId: 'DEMO_MAP_ID', }); // Use address strings in a directions request. const requestWithAddressStrings = { origin: '1600 Amphitheatre Parkway, Mountain View, CA', destination: '345 Spear Street, San Francisco, CA', fields: ['path'], }; console.log({ requestWithAddressStrings }); // Use Place IDs in a directions request. const originPlaceInstance = new Place({ id: 'ChIJiQHsW0m3j4ARm69rRkrUF3w', // Mountain View, CA }); const destinationPlaceInstance = new Place({ id: 'ChIJIQBpAG2ahYAR_6128GcTUEo', // San Francisco, CA }); const requestWithPlaceIds: google.maps.routes.ComputeRoutesRequest = { origin: originPlaceInstance, destination: destinationPlaceInstance, fields: ['path'], // Request fields needed to draw polylines. }; console.log({ requestWithPlaceIds }); // Use lat/lng in a directions request. // Mountain View, CA const originLatLng = { lat: 37.422, lng: -122.084058 }; // San Francisco, CA const destinationLatLng = { lat: 37.774929, lng: -122.419415 }; // Define a computeRoutes request. const requestWithLatLngs: google.maps.routes.ComputeRoutesRequest = { origin: originLatLng, destination: destinationLatLng, fields: ['path'], }; console.log({ requestWithLatLngs }); // Use Plus Codes in a directions request. const requestWithPlusCodes: google.maps.routes.ComputeRoutesRequest = { origin: '849VCWC8+R9', // Mountain View, CA destination: 'CRHJ+C3 Stanford, CA 94305, USA', // Stanford, CA fields: ['path'], }; console.log({ requestWithPlusCodes }); // Define a routes request. const request: google.maps.routes.ComputeRoutesRequest = { origin: 'Mountain View, CA', destination: 'San Francisco, CA', travelMode: 'DRIVING', fields: ['path'], // Request fields needed to draw polylines. }; // Call computeRoutes to get the directions. const { routes } = await Route.computeRoutes(request); // Use createPolylines to create polylines for the route. if (!routes) { console.warn('No routes found.'); return; } mapPolylines = routes[0].createPolylines(); // Add polylines to the map. mapPolylines.forEach((polyline) => { polyline.setMap(map); }); // Create markers to start and end points. const markers = await routes[0].createWaypointAdvancedMarkers(); // Add markers to the map markers.forEach((marker) => { marker.map = map; }); // Display the raw JSON for the result in the console. console.log(`Response:\n ${JSON.stringify(routes, null, 2)}`); // Fit the map to the path. void fitMapToPath(routes[0].path!); } // Helper function to fit the map to the path. async function fitMapToPath(path: google.maps.LatLngLiteral[]) { const { LatLngBounds } = await google.maps.importLibrary('core'); const bounds = new LatLngBounds(); path.forEach((point) => { bounds.extend(point); }); map.fitBounds(bounds); } void init();
JavaScript
// Initialize and add the map. let map; let mapPolylines = []; const center = { lat: 37.447646, lng: -122.113878 }; // Palo Alto, CA // Initialize and add the map. async function init() { // Request the needed libraries. const [{ Map }, { Place }, { Route }] = await Promise.all([ google.maps.importLibrary('maps'), google.maps.importLibrary('places'), google.maps.importLibrary('routes'), ]); map = new Map(document.getElementById('map'), { zoom: 12, center, mapTypeControl: false, mapId: 'DEMO_MAP_ID', }); // Use address strings in a directions request. const requestWithAddressStrings = { origin: '1600 Amphitheatre Parkway, Mountain View, CA', destination: '345 Spear Street, San Francisco, CA', fields: ['path'], }; console.log({ requestWithAddressStrings }); // Use Place IDs in a directions request. const originPlaceInstance = new Place({ id: 'ChIJiQHsW0m3j4ARm69rRkrUF3w', // Mountain View, CA }); const destinationPlaceInstance = new Place({ id: 'ChIJIQBpAG2ahYAR_6128GcTUEo', // San Francisco, CA }); const requestWithPlaceIds = { origin: originPlaceInstance, destination: destinationPlaceInstance, fields: ['path'], // Request fields needed to draw polylines. }; console.log({ requestWithPlaceIds }); // Use lat/lng in a directions request. // Mountain View, CA const originLatLng = { lat: 37.422, lng: -122.084058 }; // San Francisco, CA const destinationLatLng = { lat: 37.774929, lng: -122.419415 }; // Define a computeRoutes request. const requestWithLatLngs = { origin: originLatLng, destination: destinationLatLng, fields: ['path'], }; console.log({ requestWithLatLngs }); // Use Plus Codes in a directions request. const requestWithPlusCodes = { origin: '849VCWC8+R9', // Mountain View, CA destination: 'CRHJ+C3 Stanford, CA 94305, USA', // Stanford, CA fields: ['path'], }; console.log({ requestWithPlusCodes }); // Define a routes request. const request = { origin: 'Mountain View, CA', destination: 'San Francisco, CA', travelMode: 'DRIVING', fields: ['path'], // Request fields needed to draw polylines. }; // Call computeRoutes to get the directions. const { routes } = await Route.computeRoutes(request); // Use createPolylines to create polylines for the route. if (!routes) { console.warn('No routes found.'); return; } mapPolylines = routes[0].createPolylines(); // Add polylines to the map. mapPolylines.forEach((polyline) => { polyline.setMap(map); }); // Create markers to start and end points. const markers = await routes[0].createWaypointAdvancedMarkers(); // Add markers to the map markers.forEach((marker) => { marker.map = map; }); // Display the raw JSON for the result in the console. console.log(`Response:\n ${JSON.stringify(routes, null, 2)}`); // Fit the map to the path. void fitMapToPath(routes[0].path); } // Helper function to fit the map to the path. async function fitMapToPath(path) { const { LatLngBounds } = await google.maps.importLibrary('core'); const bounds = new LatLngBounds(); path.forEach((point) => { bounds.extend(point); }); map.fitBounds(bounds); } void init();
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
HTML
<html>
<head>
<title>Get directions</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
<script>
// prettier-ignore
(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
key: "GOOGLE_MAPS_API_KEY"
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>Chiama il computeRoutes()
metodo per richiedere un percorso tra due località. L'esempio seguente mostra come definire una
richiesta e poi chiamare computeRoutes() per ottenere un percorso.
// Import the Routes library. const { Route } = await google.maps.importLibrary('routes'); // Define a computeRoutes request. const request = { origin: 'Mountain View, CA', destination: 'San Francisco, CA', }; // Call the computeRoutes() method to get routes. const {routes} = await Route.computeRoutes(request);
Scegli i campi da restituire
Quando richiedi un percorso, devi utilizzare una maschera di campo per specificare le informazioni che la risposta deve restituire. Puoi specificare i nomi delle proprietà della classe Route nella maschera di campo.
L'utilizzo di una maschera di campo garantisce anche di non richiedere dati non necessari, il che a sua volta contribuisce alla latenza della risposta ed evita di restituire informazioni di cui il sistema non ha bisogno.
Specifica l'elenco dei campi di cui hai bisogno impostando la
ComputeRoutesRequest.fields
proprietà, come mostrato nello snippet seguente:
TypeScript
// Define a routes request. const request: google.maps.routes.ComputeRoutesRequest = { origin: 'Mountain View, CA', destination: 'San Francisco, CA', travelMode: 'DRIVING', fields: ['path'], // Request fields needed to draw polylines. };
JavaScript
// Define a routes request. const request = { origin: 'Mountain View, CA', destination: 'San Francisco, CA', travelMode: 'DRIVING', fields: ['path'], // Request fields needed to draw polylines. };
Specifica le località per un percorso
Per calcolare un percorso, devi specificare almeno le località di origine e destinazione del percorso e una maschera di campo. Puoi anche specificare i punti di passaggio intermedi lungo un percorso e utilizzare i punti di passaggio per altre operazioni, ad esempio aggiungere fermate o punti di passaggio lungo un percorso.
In ComputeRoutesRequest, puoi specificare una località in uno dei seguenti
modi:
- Luogo (preferito)
- Coordinate di latitudine/longitudine
- Stringa di indirizzo ("Chicago, IL" o "Darwin, NT, Australia")
- Plus Code
Puoi specificare le località per tutti i punti di passaggio in una richiesta nello stesso modo oppure puoi combinarle. Ad esempio, puoi utilizzare le coordinate di latitudine/longitudine per il punto di passaggio di origine e un oggetto Place per il punto di passaggio di destinazione.
Per efficienza e accuratezza, utilizza gli oggetti Place anziché le coordinate di latitudine/longitudine o stringhe di indirizzo. Gli ID luogo sono univoci ed espliciti e forniscono vantaggi di geocodifica per il routing come punti di accesso e variabili di traffico. Aiutano a evitare le seguenti situazioni che possono derivare da altri modi per specificare una località:
- L'utilizzo delle coordinate di latitudine/longitudine può comportare l'allineamento della località alla strada più vicina a queste coordinate, che potrebbe non essere un punto di accesso alla proprietà o persino una strada che conduce rapidamente o in sicurezza alla destinazione.
- Le stringhe di indirizzo devono prima essere geocodificate dall'API Routes per convertirle in coordinate di latitudine/longitudine prima che possa calcolare un percorso. Questa conversione può influire sulle prestazioni.
Specifica una località come oggetto Place (preferito)
Per specificare una località utilizzando un luogo, crea una nuova istanza Place. Lo snippet seguente mostra come creare nuove istanze Place per origin
e destination, quindi come utilizzarle in una ComputeRoutesRequest:
TypeScript
// Use Place IDs in a directions request. const originPlaceInstance = new Place({ id: 'ChIJiQHsW0m3j4ARm69rRkrUF3w', // Mountain View, CA }); const destinationPlaceInstance = new Place({ id: 'ChIJIQBpAG2ahYAR_6128GcTUEo', // San Francisco, CA }); const requestWithPlaceIds: google.maps.routes.ComputeRoutesRequest = { origin: originPlaceInstance, destination: destinationPlaceInstance, fields: ['path'], // Request fields needed to draw polylines. };
JavaScript
// Use Place IDs in a directions request. const originPlaceInstance = new Place({ id: 'ChIJiQHsW0m3j4ARm69rRkrUF3w', // Mountain View, CA }); const destinationPlaceInstance = new Place({ id: 'ChIJIQBpAG2ahYAR_6128GcTUEo', // San Francisco, CA }); const requestWithPlaceIds = { origin: originPlaceInstance, destination: destinationPlaceInstance, fields: ['path'], // Request fields needed to draw polylines. };
Coordinate di latitudine/longitudine
Per specificare una località come coordinate di latitudine/longitudine, crea una nuova istanza
google.maps.LatLngLiteral, google.maps.LatLngAltitude, o
google.maps.LatLngAltitudeLiteral. Lo snippet seguente mostra come creare
nuove google.maps.LatLngLiteral istanze per origin e destination,
quindi come utilizzarle in una computeRoutesRequest:
TypeScript
// Use lat/lng in a directions request. // Mountain View, CA const originLatLng = { lat: 37.422, lng: -122.084058 }; // San Francisco, CA const destinationLatLng = { lat: 37.774929, lng: -122.419415 }; // Define a computeRoutes request. const requestWithLatLngs: google.maps.routes.ComputeRoutesRequest = { origin: originLatLng, destination: destinationLatLng, fields: ['path'], };
JavaScript
// Use lat/lng in a directions request. // Mountain View, CA const originLatLng = { lat: 37.422, lng: -122.084058 }; // San Francisco, CA const destinationLatLng = { lat: 37.774929, lng: -122.419415 }; // Define a computeRoutes request. const requestWithLatLngs = { origin: originLatLng, destination: destinationLatLng, fields: ['path'], };
Stringa di indirizzo
Le stringhe di indirizzo sono indirizzi letterali rappresentati da una stringa (ad es. "1600 Amphitheatre Parkway, Mountain View, CA"). La geocodifica è il processo di conversione di una stringa di indirizzo in coordinate di latitudine e longitudine (ad es. latitudine 37.423021 e longitudine -122.083739).
Quando passi una stringa di indirizzo come località di un punto di passaggio, la libreria Routes geocodifica internamente la stringa per convertirla in coordinate di latitudine e longitudine.
Lo snippet seguente mostra come creare una ComputeRoutesRequest con una stringa di indirizzo per origin e destination:
TypeScript
// Use address strings in a directions request. const requestWithAddressStrings = { origin: '1600 Amphitheatre Parkway, Mountain View, CA', destination: '345 Spear Street, San Francisco, CA', fields: ['path'], };
JavaScript
// Use address strings in a directions request. const requestWithAddressStrings = { origin: '1600 Amphitheatre Parkway, Mountain View, CA', destination: '345 Spear Street, San Francisco, CA', fields: ['path'], };
Imposta la regione per l'indirizzo
Se passi una stringa di indirizzo incompleta come località di un punto di passaggio, l'API potrebbe utilizzare le coordinate di latitudine/longitudine geocodificate errate. Ad esempio, effettua una richiesta specificando "Toledo" come origine e "Madrid" come destinazione per un percorso in auto:
// Define a request with an incomplete address string. const request = { origin: 'Toledo', destination: 'Madrid', };
In questo esempio, "Toledo" viene interpretata come una città dello stato dell'Ohio negli Stati Uniti, non in Spagna. Di conseguenza, la richiesta restituisce un array vuoto, il che significa che non esistono percorsi.
Puoi configurare l'API in modo che restituisca risultati orientati a una regione specifica includendo il parametro regionCode. Questo parametro specifica il codice regione come un ccTLD ("dominio di primo livello") valore di due caratteri. La maggior parte dei codici ccTLD è identica ai codici ISO 3166-1, con alcune eccezioni notevoli eccezioni. Ad esempio, il ccTLD del Regno Unito è "uk" (.co.uk), mentre il suo codice ISO 3166-1 è "gb" (tecnicamente per l'entità "Regno Unito di Gran Bretagna e Irlanda del Nord").
Una richiesta di indicazioni stradali da "Toledo" a "Madrid" che include il parametro regionCode restituisce risultati appropriati perché "Toledo" viene interpretata come una città in Spagna:
const request = { origin: 'Toledo', destination: 'Madrid', region: 'es', // Specify the region code for Spain. };
Plus Code
Molte persone non hanno un indirizzo preciso, il che può rendere difficile la ricezione delle consegne. In alternativa, le persone con un indirizzo potrebbero preferire accettare le consegne in località più specifiche, ad esempio un ingresso posteriore o una banchina di carico.
I plus code sono come gli indirizzi stradali per le persone o i luoghi che non hanno un indirizzo effettivo. Anziché indirizzi con nomi e numeri di vie, i plus code sono basati su coordinate di latitudine/longitudine e vengono visualizzati come numeri e lettere.
Google ha sviluppato Plus Code per offrire il vantaggio degli indirizzi a tutti e a tutto. Un plus code è un riferimento di località codificato, derivato da coordinate di latitudine/longitudine, che rappresenta un'area: 1/8000 di grado per 1/8000 di grado (circa 14 m x 14 m all'equatore) o più piccola. Puoi utilizzare i plus code in sostituzione degli indirizzi stradali in luoghi in cui non esistono o in cui gli edifici non sono numerati o le strade non hanno un nome.
I plus code devono essere formattati come codice globale o codice composto:
- Il**codice globale** è composto da un prefisso di 4 caratteri e un codice locale di almeno 6 caratteri. Ad esempio, per l'indirizzo "1600 Amphitheatre Parkway, Mountain View, CA", il codice globale è "849V" e il codice locale è "CWC8+R9". Quindi, utilizza l'intero plus code di 10 caratteri Plus Code per specificare il valore della località come "849VCWC8+R9".
- Il codice composto è composto da un codice locale di almeno 6 caratteri combinato con una località esplicita. Ad esempio, l'indirizzo "450 Serra Mall, Stanford, CA 94305, USA" ha un codice locale "CRHJ+C3". Per un indirizzo composto, combina il codice locale con la parte dell'indirizzo relativa a città, stato, codice postale e paese nel formato "CRHJ+C3 Stanford, CA 94305, USA".
Lo snippet seguente mostra come calcolare un percorso specificando un punto di passaggio per l'origine e la destinazione del percorso utilizzando i plus code:
TypeScript
// Use Plus Codes in a directions request. const requestWithPlusCodes: google.maps.routes.ComputeRoutesRequest = { origin: '849VCWC8+R9', // Mountain View, CA destination: 'CRHJ+C3 Stanford, CA 94305, USA', // Stanford, CA fields: ['path'], };
JavaScript
// Use Plus Codes in a directions request. const requestWithPlusCodes = { origin: '849VCWC8+R9', // Mountain View, CA destination: 'CRHJ+C3 Stanford, CA 94305, USA', // Stanford, CA fields: ['path'], };