Servizio indicazioni stradali

Panoramica

Per calcolare le indicazioni stradali puoi usare diversi metodi di trasporto pubblico) utilizzando DirectionsService . Questo oggetto comunica con le indicazioni stradali dell'API di Google Maps Servizio che riceve richieste di direzione e restituisce un percorso efficiente. Il tempo di percorrenza è il fattore principale dell'ottimizzazione, ma ci sono anche altri fattori come distanza, numero di svolte e molte altre. Puoi gestire personalmente le indicazioni stradali o utilizzare DirectionsRenderer oggetto per il rendering che consentono di analizzare i dati e visualizzare i risultati.

Quando specifichi l'origine o la destinazione in una richiesta di indicazioni stradali, puoi specificare una stringa di query (ad esempio, "Chicago, IL" o "Darwin, NSW, Australia"), un valore LatLng o un Posiziona l'oggetto.

Il servizio Indicazioni stradali può restituire indicazioni stradali con più parti utilizzando una serie di tappe. Le direzioni vengono visualizzate come disegno di una polilinea il percorso su una mappa o anche come serie di testi descrizione all'interno di un elemento <div> (ad esempio, "Svolta a destra allo svincolo del ponte di Williamsburg").

Per iniziare

Prima di utilizzare il servizio Indicazioni stradali nell'API Maps JavaScript, assicurati che l'API Directions sia abilitata nella console Google Cloud, configurato per l'API Maps JavaScript.

Per visualizzare l'elenco delle API abilitate:

  1. Vai alla sezione console Google Cloud.
  2. Fai clic sul pulsante Seleziona un progetto. quindi seleziona lo stesso progetto API Maps JavaScript e fai clic su Apri.
  3. Nell'elenco delle API sulla Dashboard, cerca API Directions.
  4. Se vedi l'API nell'elenco, non devi eseguire altre operazioni. Se l'API non è elencata, abilitala:
      .
    1. Nella parte superiore della pagina, seleziona ABILITA API per visualizzare lo stato Scheda Raccolta. In alternativa, dal menu laterale a sinistra, Seleziona Libreria.
    2. Cerca l'API Directions e selezionala dalla dei risultati di ricerca.
    3. Seleziona ABILITA. Al termine del processo, L'API Directions viene visualizzata nell'elenco delle API nella Dashboard.

Prezzi e norme

Prezzi

Dal 16 luglio 2018 è entrato in vigore un nuovo piano tariffario con pagamento a consumo per Maps, Routes e Places. Per scoprire di più sui nuovi prezzi e l'utilizzo del servizio Indicazioni stradali JavaScript, consulta Utilizzo e fatturazione per l'API Directions.

Norme

L'utilizzo del servizio Directions deve essere conforme alle norme descritte per l'API Directions.

Richieste di indicazioni stradali

L'accesso al servizio Indicazioni stradali è asincrono, poiché l'API di Google Maps deve effettuare una chiamata a un o server web. Per questo motivo, devi trasmettere un callback da eseguire al completamento della richiesta. Questo deve elaborare i risultati. Tieni presente che Il servizio di indicazioni stradali potrebbe restituire più di un itinerario possibile come un array di elementi routes[] separati.

Per utilizzare le indicazioni stradali nell'API Maps JavaScript, crea un oggetto digita DirectionsService e chiama DirectionsService.route() per avviare una richiesta al servizio Directions, passandogli una DirectionsRequest oggetto letterale contenente i termini di input e un metodo di callback per eseguire al ricevimento della risposta.

Il valore letterale dell'oggetto DirectionsRequest contiene il valore seguenti campi:

{
  origin: LatLng | String | google.maps.Place,
  destination: LatLng | String | google.maps.Place,
  travelMode: TravelMode,
  transitOptions: TransitOptions,
  drivingOptions: DrivingOptions,
  unitSystem: UnitSystem,
  waypoints[]: DirectionsWaypoint,
  optimizeWaypoints: Boolean,
  provideRouteAlternatives: Boolean,
  avoidFerries: Boolean,
  avoidHighways: Boolean,
  avoidTolls: Boolean,
  region: String
}

Questi campi sono descritti di seguito:

  • origin (obbligatorio) specifica la posizione di partenza da per il calcolo delle indicazioni stradali. Questo valore può essere specificato come String (ad es. "Chicago, IL"), come LatLng o come oggetto Posiziona. Se utilizzi un Posiziona, puoi specificare un place ID, una stringa di query o un LatLng posizione. Puoi recuperare gli ID luogo da Geocoding, Place Search and Place Autocomplete in API Maps JavaScript. Ad esempio, utilizzo degli ID luogo di Place Completamento automatico; consulta Luogo Completamento automatico e indicazioni stradali.
  • destination (obbligatorio) specifica la posizione finale verso cui calcolare le indicazioni stradali. Le opzioni sono le stesse utilizzate per Campo origin descritto sopra.
  • travelMode (obbligatorio) specifica cosa mezzo di trasporto da utilizzare per il calcolo delle indicazioni stradali. Valido i valori sono specificati in Modalità di viaggio di seguito.
  • transitOptions (facoltativo) specifica valori applicabili solo alle richieste in cui travelMode è TRANSIT. I valori validi sono descritti in Opzioni di trasporto pubblico di seguito.
  • drivingOptions (facoltativo) specifica valori applicabili solo alle richieste in cui travelMode è DRIVING. I valori validi sono descritti in Opzioni di guida di seguito.

  • unitSystem (facoltativo) specifica cosa di unità di misura da utilizzare per la visualizzazione dei risultati. I valori validi sono specificati in Sistemi di unità di seguito.

  • waypoints[] (facoltativo) specifica un array di DirectionsWaypoint. Alterazione dei waypoint un percorso instradandolo attraverso le località specificate. Una tappa viene specificata come oggetto letterale con campi come mostrato di seguito:

    • location specifica la posizione tappa, come LatLng, come Posiziona un oggetto o come oggetto String che verrà geocodificato.
    • stopover è un valore booleano che indica che la tappa è una fermata lungo il percorso, che ha le l'effetto della suddivisione del percorso in due percorsi.

    Per ulteriori informazioni sui waypoint, consulta l'articolo sull'utilizzo i waypoint in Route qui sotto.

  • optimizeWaypoints (facoltativo) specifica che il percorso che utilizza waypoints fornito può essere ottimizzate riorganizzando i waypoint in un ordine più efficiente. Se true, il servizio Indicazioni stradali restituirà il waypoints riordinato in un campo waypoint_order. Per saperne di più per ulteriori informazioni, consulta la sezione Utilizzo dei waypoint nelle route. below.)
  • provideRouteAlternatives (facoltativo) se impostato in true specifica che il servizio Indicazioni stradali può fornire più alternative di routing nella risposta. Tieni presente che fornire alternative di routing può aumentare il tempo di risposta da il server. Questa opzione è disponibile solo per le richieste senza tappe intermedie.
  • avoidFerries (facoltativo) se impostato su true indica che le route calcolate devono evitare i traghetti, se possibile.
  • avoidHighways (facoltativo) se impostato su true indica che le route calcolate devono se possibile, evita le autostrade principali.
  • avoidTolls (facoltativo) se impostato su true indica che le route calcolate devono se possibile, evita le strade a pedaggio.
  • region (facoltativo) specifica la il codice regione, specificato come ccTLD ("dominio di primo livello") a due caratteri. (Per ulteriori informazioni, vedi Differenziazione per regione riportata di seguito.)
di Gemini Advanced.

Di seguito è riportato un esempio di DirectionsRequest:

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}

Modalità di viaggio

Quando calcoli le indicazioni stradali, devi specificare quale modalità di trasporto utilizzare. Il seguente viaggio sono attualmente supportate:

  • DRIVING (valore predefinito) indica le indicazioni stradali standard utilizzando la rete stradale.
  • BICYCLING richiede di andare in bicicletta indicazioni stradali per biciclette strade preferite.
  • TRANSIT richiede indicazioni stradali tramite percorsi dei trasporti pubblici.
  • WALKING richiede indicazioni a piedi tramite percorsi pedonali e marciapiedi.

Consulta i dettagli sulla copertura di Google Maps Platform per stabilire in che misura un paese supporta le indicazioni stradali. Se richiedi le indicazioni stradali per una regione in cui quel tipo di direzione non è disponibile, la risposta restituirà DirectionsStatus="ZERO_RESULTS".

Nota: le indicazioni a piedi potrebbero non includere informazioni chiare percorsi pedonali, quindi le indicazioni a piedi restituiranno avvisi nel DirectionsResult. Questi avvisi devono essere mostrati sempre utente. Se non usi il valore predefinito DirectionsRenderer, è responsabile della visualizzazione degli avvisi.

Opzioni di trasporto pubblico

Le opzioni disponibili per una richiesta di indicazioni stradali variano in base alla modalità di viaggio. Quando richiedi indicazioni per il trasporto pubblico, avoidHighways, avoidTolls, waypoints[] e Le opzioni optimizeWaypoints verranno ignorate. Puoi specificare opzioni di percorso specifiche per il trasporto pubblico TransitOptions oggetto letterale.

Le indicazioni stradali con il trasporto pubblico fanno riferimento al tempo. Le indicazioni stradali verranno restituite solo per in futuro.

Il valore letterale dell'oggetto TransitOptions contiene quanto segue campi:

{
  arrivalTime: Date,
  departureTime: Date,
  modes[]: TransitMode,
  routingPreference: TransitRoutePreference
}

Questi campi sono descritti di seguito:

  • arrivalTime (facoltativo) specifica la classe ora di arrivo come oggetto Date. Se l'ora di arrivo è specificato, l'ora di partenza viene ignorata.
  • departureTime (facoltativo) specifica la classe orario di partenza come oggetto Date. La departureTime verrà ignorato se arrivalTime è specificato. Il valore predefinito è ora (ora corrente), se non è presente alcun valore specificato per departureTime o arrivalTime.
  • modes[] (facoltativo) è un array contenente uno o altri valori letterali oggetto TransitMode. Questo campo può essere se la richiesta include una chiave API. Ogni TransitMode specifica una modalità di transito preferita. Sono consentiti i seguenti valori:
    • BUS indica che nell'itinerario calcolato dovrebbe preferire i viaggi in autobus.
    • RAIL indica che calcolo dell'itinerario dovrebbe preferire i viaggi in treno, tram, metropolitana leggera e metropolitana.
    • SUBWAY indica che per il percorso calcolato dovrebbe preferire i viaggi in metropolitana.
    • TRAIN indica che per il percorso calcolato dovrebbe preferire i viaggi in treno.
    • TRAM indica che percorso calcolato predilige i tram e la metropolitana leggera.
  • routingPreference (facoltativo) specifica le preferenze per i percorsi con il trasporto pubblico. Utilizzando questa opzione, puoi differenziare le opzioni restituite, anziché accettare il percorso migliore predefinito scelto dall'API. Questo campo può essere specificato solo se la richiesta include un chiave API. Sono consentiti i seguenti valori:
    • FEWER_TRANSFERS indica che il percorso calcolato deve preferire un numero limitato di trasferimenti.
    • LESS_WALKING indica che il percorso calcolato dovrebbe preferire una quantità limitata di camminando.

Di seguito è riportato un esempio di DirectionsRequest per il trasporto pubblico:

{
  origin: 'Hoboken NJ',
  destination: 'Carroll Gardens, Brooklyn',
  travelMode: 'TRANSIT',
  transitOptions: {
    departureTime: new Date(1337675679473),
    modes: ['BUS'],
    routingPreference: 'FEWER_TRANSFERS'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}

Opzioni di guida

Puoi specificare le opzioni di routing per le indicazioni stradali tramite la DrivingOptions .

L'oggetto DrivingOptions contiene i seguenti campi:

{
  departureTime: Date,
  trafficModel: TrafficModel
}

Questi campi sono descritti di seguito:

  • departureTime (obbligatorio per drivingOptions oggetto letterale da essere valido) specifica la orario di partenza desiderato come oggetto Date. Il valore deve essere impostata sull'ora attuale o su un orario futuro. Non può essere nel in passato. L'API converte tutte le date in UTC per garantire una gestione coerente tra fusi orari diversi). Per i clienti del piano Google Maps Platform Premium, se includi departureTime nella richiesta, l'API restituisce il percorso migliore in base alle condizioni del traffico previste in quel momento e include il tempo previsto nel traffico (duration_in_traffic) nella risposta. Se non specifichi un orario di partenza (ossia, se la richiesta non include drivingOptions), il percorso restituito è un percorso generalmente buono senza tenere conto delle condizioni del traffico.
  • trafficModel (facoltativo) specifica i presupposti per da utilizzare per calcolare il tempo nel traffico. Questa impostazione influisce sul valore nel campo duration_in_traffic della risposta, che contiene il tempo previsto nel traffico in base alle medie storiche. Il valore predefinito è bestguess. Sono consentiti i seguenti valori:
    • bestguess (predefinito) indica che l'oggetto restituito duration_in_traffic dovrebbe essere la stima migliore del viaggio in base a ciò che è noto sulle condizioni storiche del traffico e traffico in tempo reale. Il traffico in tempo reale diventa più importante più si avvicina departureTime è fino a ora.
    • pessimistic indica che l'oggetto restituito duration_in_traffic deve essere più lungo del viaggio effettivo tempo nella maggior parte dei giorni, anche se occasionalmente i giorni con traffico particolarmente intenso possono superare questo valore.
    • optimistic indica che l'oggetto restituito duration_in_traffic deve essere più breve del valore effettivo tempo di percorrenza quasi tutti i giorni, anche se occasionalmente i giorni in cui si registrano condizioni del traffico possono essere più veloci di questo valore.
di Gemini Advanced.

Di seguito è riportato un esempio di DirectionsRequest per le indicazioni stradali:

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(Date.now() + N),  // for the time N milliseconds from now.
    trafficModel: 'optimistic'
  }
}

Sistemi unitari

Per impostazione predefinita, le indicazioni stradali vengono calcolate e visualizzate utilizzando il sistema unitario del paese o della regione dell'origine. (Nota: le origini espresse utilizzando coordinate di latitudine/longitudine anziché indirizzi sempre predefiniti alle unità metriche). Ad esempio, una route da "Milano, Italia" a "Toronto, ONT" mostrerà i risultati in miglia, mentre il percorso inverso mostrerà i risultati in chilometri. Tu può sostituire questo sistema di unità impostandone una in modo esplicito all'interno tramite uno dei seguenti UnitSystem valori:

  • UnitSystem.METRIC specifica all'utilizzo del sistema metrico. Le distanze vengono indicate utilizzando i chilometri.
  • UnitSystem.IMPERIAL specifica l'utilizzo del modello (inglese). Le distanze vengono indicate utilizzando le miglia.

Nota: questa impostazione di sistema è disponibile solo per influisce sul testo mostrato all'utente. Il risultato delle indicazioni stradali contiene valori di distanza, non mostrati all'utente, che sono sempre espressa in metri.

Differenziazione regionale per le indicazioni stradali

Il servizio Indicazioni stradali dell'API di Google Maps restituisce i risultati degli indirizzi influenzati dal dominio (regione o paese) da cui hai caricato JavaScript bootstrap. (poiché la maggior parte degli utenti carica https://maps.googleapis.com/ Imposta il dominio implicito sugli Stati Uniti. Se carichi bootstrap da un altro dominio supportato, riceverai risultati influenzati da quel dominio. Ad esempio, cerca "Milano" maggio restituire risultati diversi dal caricamento delle applicazioni https://maps.googleapis.com/ (Stati Uniti) di uno caricamento di http://maps.google.es/ (Spagna).

Puoi anche impostare il servizio Indicazioni stradali in modo che restituiscano risultati parziali in base a regione specifica usando il parametro region. Questo parametro prende un codice regione, specificato come Unicode a due caratteri (non numerici) della regione. Nella maggior parte dei casi, questi tag sono mappati direttamente al ccTLD ("top-level") dominio") valori a due caratteri come "uk" in "co.uk" ad esempio. In alcuni in questo caso, il tag region supporta anche i codici ISO-3166-1, talvolta differiscono dai valori ccTLD ("GB" per "Gran Bretagna", ad esempio).

Quando utilizzi il parametro region:

  • Specifica un solo paese o una sola regione. Vengono ignorati più valori e potrebbe tradursi in una richiesta non andata a buon fine.
  • Utilizza solo sottotag di regione a due caratteri (formato Unicode CLDR). Tutti gli altri comporteranno errori.

La differenziazione per regione è supportata solo per i paesi e le regioni che supportano indicazioni stradali. Consulta i dettagli sulla copertura di Google Maps Platform per visualizzare la copertura internazionale dell'API Directions.

Istruzioni di rendering

L'avvio di una richiesta di indicazioni stradali al DirectionsService con il metodo route() richiede il passaggio di un callback che viene eseguito al completamento richiesta di servizio. Questo callback restituirà un DirectionsResult e DirectionsStatus il codice nella risposta.

Stato query Indicazioni stradali

DirectionsStatus può restituire i seguenti valori:

  • OK indica che la risposta contiene un DirectionsResult valido.
  • NOT_FOUND indica almeno uno degli alle località specificate nell'origine, nella destinazione o Impossibile geocodificare le tappe.
  • ZERO_RESULTS indica che non è stato trovato alcun percorso tra il luogo di partenza e quello di destinazione.
  • MAX_WAYPOINTS_EXCEEDED indica anche questo sono stati forniti molti campi DirectionsWaypoint in DirectionsRequest. Consulta la sezione di seguito limiti per le tappe.
  • MAX_ROUTE_LENGTH_EXCEEDED indica il percorso richiesto è troppo lungo e non può essere elaborato. Questo errore si verifica quando vengono restituite le indicazioni stradali. Prova a ridurre il numero di tappe, svolte o istruzioni.
  • INVALID_REQUEST indica che il valore DirectionsRequest specificato non è valido. Le più comuni le cause di questo codice di errore sono le richieste in cui manca un luogo di partenza o di arrivo oppure una richiesta di trasporto pubblico che includa tappe.
  • OVER_QUERY_LIMIT indica che la pagina web ha ha inviato troppe richieste nel periodo di tempo consentito.
  • REQUEST_DENIED indica che la pagina web è non possono utilizzare il servizio di indicazioni stradali.
  • UNKNOWN_ERROR indica una richiesta di indicazioni stradali non è stato elaborato a causa di un errore del server. La richiesta può riuscire se riprovi.

Devi assicurarti che la query sulle indicazioni stradali abbia restituito i risultati controllando questo valore prima di elaborare il risultato.

Visualizzazione di DirectionsResult

DirectionsResult contiene il risultato dell'oggetto la query relativa alle indicazioni stradali, che puoi gestire autonomamente o a un oggetto DirectionsRenderer, che può gestire automaticamente la visualizzazione del risultato su una mappa.

Per visualizzare un DirectionsResult tramite un DirectionsRenderer, devi eseguire l'operazione seguenti:

  1. Crea un oggetto DirectionsRenderer.
  2. Chiama setMap() sul renderer da associare alla mappa passata.
  3. Richiama setDirections() sul renderer, passando DirectionsResult come indicato in alto. Poiché il renderer è un MVCObject, Rileverà automaticamente qualsiasi modifica alle sue proprietà e aggiorna la mappa quando le relative indicazioni stradali sono è cambiato.

L'esempio seguente calcola le indicazioni stradali tra due località sulla Route 66, dove i dati di partenza e di destinazione sono impostate dai valori "start" e "end" specificati disponibili negli elenchi a discesa. DirectionsRenderer gestisce la visualizzazione della polilinea tra luoghi e la posizione degli indicatori nell'origine, destinazione ed eventuali tappe, se applicabili.

function initMap() {
  var directionsService = new google.maps.DirectionsService();
  var directionsRenderer = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    center: chicago
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsRenderer.setMap(map);
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
    origin: start,
    destination: end,
    travelMode: 'DRIVING'
  };
  directionsService.route(request, function(result, status) {
    if (status == 'OK') {
      directionsRenderer.setDirections(result);
    }
  });
}

Nel corpo del codice HTML:

<div>
<strong>Start: </strong>
<select id="start" onchange="calcRoute();">
  <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
</select>
<strong>End: </strong>
<select id="end" onchange="calcRoute();">
  <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
</select>
</div>

Visualizza esempio

L'esempio seguente mostra indicazioni stradali utilizzando diversi modalità di viaggio tra Haight-Ashbury a Ocean Beach in San Francisco, California (USA):

function initMap() {
  var directionsService = new google.maps.DirectionsService();
  var directionsRenderer = new google.maps.DirectionsRenderer();
  var haight = new google.maps.LatLng(37.7699298, -122.4469157);
  var oceanBeach = new google.maps.LatLng(37.7683909618184, -122.51089453697205);
  var mapOptions = {
    zoom: 14,
    center: haight
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsRenderer.setMap(map);
}

function calcRoute() {
  var selectedMode = document.getElementById('mode').value;
  var request = {
      origin: haight,
      destination: oceanBeach,
      // Note that JavaScript allows us to access the constant
      // using square brackets and a string value as its
      // "property."
      travelMode: google.maps.TravelMode[selectedMode]
  };
  directionsService.route(request, function(response, status) {
    if (status == 'OK') {
      directionsRenderer.setDirections(response);
    }
  });
}

Nel corpo del codice HTML:

<div>
<strong>Mode of Travel: </strong>
<select id="mode" onchange="calcRoute();">
  <option value="DRIVING">Driving</option>
  <option value="WALKING">Walking</option>
  <option value="BICYCLING">Bicycling</option>
  <option value="TRANSIT">Transit</option>
</select>
</div>

Visualizza esempio

Un DirectionsRenderer non solo gestisce il display della polilinea e gli eventuali indicatori associati, ma può anche gestire la visualizzazione testuale delle indicazioni stradali sotto forma di serie di passaggi. Da fare quindi chiama setPanel() sul tuo DirectionsRenderer, passando il <div> in cui visualizzare queste informazioni. In questo modo, avrai anche la certezza di mostrare le informazioni informazioni ed eventuali avvisi associati alle o il risultato finale.

Le istruzioni testuali verranno fornite utilizzando l'impostazione della lingua preferita o la lingua specificata caricamento del codice JavaScript dell'API mediante language . Per ulteriori informazioni, vedi localizzazione.) Nel caso delle indicazioni di trasporto pubblico, il tempo sarà visualizzato nel fuso orario della fermata.

L'esempio seguente è identico a quello mostrato sopra. ma include un riquadro <div> in cui visualizza le indicazioni stradali:

function initMap() {
  var directionsService = new google.maps.DirectionsService();
  var directionsRenderer = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    center: chicago
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsRenderer.setMap(map);
  directionsRenderer.setPanel(document.getElementById('directionsPanel'));
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
    origin:start,
    destination:end,
    travelMode: 'DRIVING'
  };
  directionsService.route(request, function(response, status) {
    if (status == 'OK') {
      directionsRenderer.setDirections(response);
    }
  });
}

Nel corpo del codice HTML:

<div id="map" style="float:left;width:70%;height:100%"></div>
<div id="directionsPanel" style="float:right;width:30%;height:100%"></div>

Visualizza esempio

L'oggetto DirectionsResult

Quando invii una richiesta di indicazioni stradali al DirectionsService, ricevi una risposta composta da un codice di stato e un risultato, che è DirectionsResult . DirectionsResult è un valore letterale oggetto con i seguenti campi:

  • geocoded_waypoints[] contiene un array di DirectionsGeocodedWaypoint oggetti, ognuno contenente i dettagli sulla geocodifica di origine, destinazione e tappe.
  • routes[] contiene un array di DirectionsRoute oggetti. Ogni percorso indica un modo per dall'origine alla destinazione specificata DirectionsRequest. In genere, solo una route viene restituito per una determinata richiesta, a meno che l' Il campo provideRouteAlternatives è impostato su true, in cui possono essere restituite più route.

Nota: la proprietà via_waypoint è ritirata in percorsi alternativi. La versione 3.27 è l'ultima versione dell'API che aggiunge ulteriori tappe in percorsi alternativi. Per le versioni 3.28 e successive dell'API, puoi continuare a implementare direzioni trascinabili utilizzando il servizio Indicazioni stradali disattivando il trascinamento di percorsi alternativi. Solo il percorso principale deve essere trascinabile. Gli utenti possono trascinare il percorso principale fino a quando non corrisponde a un un percorso alternativo.

Waypoint con codifica geografica Indicazioni stradali

Un DirectionsGeocodedWaypoint contiene dettagli sulla geocodifica di origine, destinazione e tappe.

DirectionsGeocodedWaypoint è un valore letterale oggetto con nei seguenti campi:

  • geocoder_status indica il codice di stato risultante dall'operazione di geocodifica. Questo campo può contenere i seguenti valori.
    • "OK" indica che non si sono verificati errori; l'indirizzo è stato analizzato correttamente e in è stato restituito almeno un geocodice.
    • "ZERO_RESULTS" indica che il geocodice è riuscito, ma non ha restituito risultati. Questo può accadere se al geocodificatore è stato trasmesso un address inesistente.

  • partial_match indica che il geocodificatore non è tornato una corrispondenza esatta per la richiesta originale, anche se è stata in grado di corrispondere a parte l'indirizzo richiesto. Ti consigliamo di esaminare la richiesta originale relativa a errori ortografici e/o un indirizzo incompleto.

    Molto spesso le corrispondenze parziali si verificano per indirizzi che non esistono nella località passata nella richiesta. Anche le corrispondenze parziali possono essere restituito quando una richiesta corrisponde a due o più sedi nella stessa località. Ad esempio, "Via Roma, RM" restituirà una corrispondenza parziale per Henry Street e Henrietta Street. Tieni presente che se una richiesta include componente dell'indirizzo con errori ortografici, il servizio di geocodifica può suggerire un'alternativa . Anche i suggerimenti attivati in questo modo verranno contrassegnati come parziali corrispondono.

  • place_idè l'identificatore univoco di un luogo, che può essere utilizzato con altre API di Google. Ad esempio, puoi utilizzare place_id con Google Places API per ottenere i dettagli di un'attività locale, come numero di telefono, orari di apertura, recensioni degli utenti e altro ancora. Consulta le panoramica di Place ID.
  • types[] è un array che indica il tipo di un risultato restituito. Questo array contiene un insieme di zero o più tag che identificano il tipo di caratteristica restituita nel risultato. Ad esempio, un codice geografico "Milano" restituisce "locality" che indica che "Chicago" c'è una città restituisce anche "political" che indica che si tratta di un'entità politica.

Directions Routes

Nota: l'oggetto DirectionsTrip legacy ha è stato rinominato DirectionsRoute. Tieni presente che un percorso ora si riferisce all'intero percorso dall'inizio alla fine, piuttosto che una tappa del viaggio di un genitore.

Un DirectionsRoute contiene un singolo risultato di l'origine e la destinazione specificate. Questo percorso può essere composto da una o più gambe (di tipo DirectionsLeg) a seconda che siano state specificate o meno tappe. Inoltre, percorso contiene anche informazioni di avviso e copyright che devono visualizzate all'utente insieme alle informazioni di routing.

DirectionsRoute è un valore letterale oggetto con nei seguenti campi:

  • legs[] contiene un array di DirectionsLeg oggetti, ognuno dei quali contiene informazioni su una tratta del percorso, da due posizioni all'interno del percorso specificato. Per ogni gamba sarà presente una gamba separata una tappa o una destinazione specificati. (Un percorso senza tappe contiene esattamente un DirectionsLeg). Ogni gamba è composta di una serie di DirectionStep.
  • waypoint_order contiene un array che indica l'ordine di tutti i waypoint nella percorso. Questo array può contenere un ordine alterato se DirectionsRequest è stato superato optimizeWaypoints: true.
  • overview_path contiene un array di LatLng che rappresentano un valore approssimativo (attenuato) delle direzioni risultanti.
  • overview_polyline contiene un singolo points che contiene un oggetto codificato polilinea della route. Questa polilinea è un percorso approssimativo (smussato) delle direzioni risultanti.
  • bounds contiene un LatLngBounds che indica i confini della polilinea lungo il percorso specificato.
  • copyrights contiene il testo sul copyright da utilizzare visualizzate per questo percorso.
  • warnings[] contiene un array di avvisi da mostrare quando vengono mostrate queste indicazioni stradali. In caso contrario utilizzare l'oggetto DirectionsRenderer fornito, devi gestire e visualizzare gli avvisi personalmente.
  • fare contiene la tariffa totale (ossia il totale costi dei biglietti) su questo percorso. Questa proprietà viene restituita solo per il trasporto pubblico e solo per i percorsi in cui le informazioni sulle tariffe sono disponibili per tutti tratti di trasporto pubblico. Le informazioni includono:
    • currency: un Valuta ISO 4217 che indica la valuta in cui è espresso l'importo.
    • value: importo totale della tariffa, nella valuta specificata in alto.

Tappe di indicazioni stradali

Nota: l'oggetto DirectionsRoute legacy ha è stato rinominato DirectionsLeg.

Un DirectionsLeg definisce un singolo ramo di un viaggio dall'origine alla destinazione nel percorso calcolato. Per i percorsi che non contengono tappe, il percorso sarà costituito da una "gamba" singola, ma per i percorsi che definiscono una o più tappe, il percorso sarà costituito da uno o più tratti, corrispondenti al tratti specifici del viaggio.

DirectionsLeg è un valore letterale oggetto con seguenti campi:

  • steps[] contiene un array di DirectionsStep oggetti che indicano informazioni su ogni passaggio separato della tappa del viaggio.

  • distance indica la distanza totale percorsa per questa gamba, come oggetto Distance del modulo seguente:

    • value indica la distanza in metri
    • text contiene una rappresentazione stringa della distanza, che per impostazione predefinita viene visualizzata in unità di misura utilizzata all'origine. (Ad esempio, le miglia saranno utilizzate per qualsiasi origine all'interno degli Stati Uniti). Puoi sostituire questa impostazione di unità di misura impostando in modo specifico UnitSystem nella query originale. Tieni presente che, indipendentemente dal sistema di unità utilizzato, la classe Il campo distance.value contiene sempre un valore espressa in metri.

    Questi campi potrebbero non essere definiti se la distanza non è nota.

  • duration indica la durata totale questa gamba, come oggetto Duration di il seguente modulo:

    • value indica la durata in secondi.
    • text contiene una rappresentazione stringa della durata.

    Questi campi potrebbero non essere definiti se la durata non è nota.

  • duration_in_traffic indica la durata totale in base alle condizioni del traffico attuali. La duration_in_traffic viene restituito solo se tutti i seguenti elementi sono vere:

    • La richiesta non include tappe delle tappe. Vale a dire che non includi le tappe in cui stopover è true.
    • La richiesta riguarda specificamente le indicazioni stradali: mode impostata su driving.
    • departureTime è incluso nell'ambito drivingOptions nella richiesta.
    • Sono disponibili le condizioni del traffico per il percorso richiesto.

    duration_in_traffic contiene i seguenti campi:

    • value indica la durata in secondi.
    • text contiene una rappresentazione leggibile della durata.
  • arrival_time contiene l'orario di arrivo previsto per questa gamba. Questa proprietà viene restituita solo per le indicazioni di trasporto pubblico. La il risultato viene restituito come oggetto Time con tre proprietà:
    • value il tempo specificato come JavaScript Oggetto Date.
    • text il tempo specificato come stringa. È l'ora visualizzato nel fuso orario della fermata di trasporto pubblico.
    • time_zone contiene il fuso orario di questa stazione. La è il nome del fuso orario definito nel Fuso orario IANA Database, ad esempio "America/New_York".
  • departure_time contiene l'orario di partenza stimato per questo tratto, specificato come oggetto Time. La departure_time è disponibile solo per le indicazioni di trasporto pubblico.
  • start_location contiene il parametro LatLng dell'origine di questa gamba. Poiché Il servizio web Directions calcola le indicazioni stradali tra località utilizzando l'opzione di trasporto più vicina (di solito una strada) alla i punti di partenza e di arrivo, start_location può essere diversa dall'origine fornita di questo tratto se, per Ad esempio, una strada non è vicina all'origine.
  • end_location contiene LatLng della destinazione di questa tappa. Poiché DirectionsService calcola le indicazioni stradali tra le località utilizzando l'opzione di trasporto più vicina (di solito una strada) alla punti di partenza e di arrivo, end_location può essere diversa dalla destinazione fornita per questa tratta se, ad Ad esempio, una strada non è vicina alla destinazione.
  • start_address contiene l'indirizzo leggibile (in genere la via) all'inizio di questa tratta.

    Questi contenuti devono essere letti così come sono. Non analizzare in modo programmatico il all'indirizzo formattato.
  • end_address contiene l'indirizzo leggibile (in genere la via) alla fine di questa tratta.

    Questi contenuti devono essere letti così come sono. Non analizzare in modo programmatico il all'indirizzo formattato.

Indicazioni stradali Passaggi

DirectionsStep è l'unità più atomica di un di questa direzione, contenente un singolo passo che descrive una specifica istruzioni durante il viaggio. Ad es. "Svolta a sinistra in W. 4th St." Il passaggio non descrive solo l'istruzione, ma contiene anche distanza e durata informazioni relative alla correlazione tra questo passaggio e il passaggio successivo. Ad esempio, un passaggio denominato "Entra nella I-80 Ovest" può contenere un durata di "37 miglia" e "40 minuti", per indicare che il passaggio successivo dista 40 minuti da questo passaggio.

Quando utilizzi il servizio Indicazioni stradali per cercare indicazioni di trasporto pubblico, il simbolo step includerà anche Transit Informazioni specifiche sotto forma di oggetto transit. Se le indicazioni stradali includono più modalità di trasporto, indicazioni stradali dettagliate per i passi a piedi o in auto in un array di steps[]. Ad esempio, un passo a piedi includerà le indicazioni stradali dall'inizio e dalla fine località: "Walk to Innes Ave & Fitch St". Questo passaggio includerà indicazioni a piedi dettagliate per il percorso in steps[] come: "Dirigiti a nord-ovest", "Svolta a sinistra su Arelious Walker" e "Svolta a sinistra su Via Garibaldi."

DirectionsStep è un valore letterale oggetto con seguenti campi:

  • instructions contiene le istruzioni per questo passaggio all'interno di una stringa di testo.
  • distance contiene la distanza percorsa da questo passaggio al passaggio successivo, come oggetto Distance. (vedi la descrizione in DirectionsLeg qui sopra. Questo campo potrebbe non essere definito se la distanza è sconosciuta.
  • duration contiene una stima del tempo necessario per eseguire il passaggio, fino al passaggio successivo, Oggetto Duration. (vedi la descrizione nella DirectionsLeg above.) Questo campo potrebbe non essere definito se la durata è sconosciuta.
  • start_location contiene il carattere geocodificato LatLng del punto iniziale di questo passaggio.
  • end_location contiene il valore LatLng di il punto finale di questo passaggio.
  • polyline contiene un singolo points che contiene un oggetto codificato polilinea del passaggio. Questa polilinea è un percorso approssimativo (smussato) del passaggio.
  • steps[] un valore letterale oggetto DirectionsStep che contiene indicazioni dettagliate su come raggiungere la tua meta a piedi o in auto durante il trasporto pubblico indicazioni stradali. I passaggi secondari sono disponibili solo per le indicazioni di trasporto pubblico.
  • travel_mode contiene i TravelMode utilizzati in questo passaggio. Le indicazioni per il trasporto pubblico possono includere una combinazione di percorsi a piedi e indicazioni stradali con il trasporto pubblico.
  • path contiene un array di LatLngs che descrive nel corso di questo passaggio.
  • transit contiene informazioni specifiche sul trasporto pubblico, come orari di arrivo e partenza e il nome della linea di trasporto pubblico.

Informazioni specifiche sul trasporto pubblico

Le indicazioni stradali per il trasporto pubblico restituiscono informazioni aggiuntive non pertinenti per altre modalità di trasporto. Queste proprietà aggiuntive sono esposte tramite l'oggetto TransitDetails, restituito come una proprietà DirectionsStep. Dall'oggetto TransitDetails puoi accedere a informazioni aggiuntive per TransitStop, TransitLine, TransitAgency e VehicleType oggetto come descritto di seguito.

Dettagli trasporto pubblico

L'oggetto TransitDetails espone quanto segue proprietà:

  • arrival_stop contiene un TransitStop che rappresenta la stazione o la fermata di arrivo con i seguenti elementi: proprietà:
    • name il nome della stazione/fermata di trasporto pubblico. Ad esempio: "Piazza dell'Unione".
    • location la posizione della stazione/fermata di trasporto pubblico, rappresentato come LatLng.
  • departure_stop contiene un elemento TransitStop che rappresenta la stazione/fermata di partenza.
  • arrival_time contiene l'ora di arrivo, specificata come Oggetto Time con tre proprietà:
      .
    • value il tempo specificato come JavaScript Oggetto Date.
    • text il tempo specificato come stringa. È l'ora visualizzato nel fuso orario della fermata di trasporto pubblico.
    • time_zone contiene il fuso orario di questa stazione. La è il nome del fuso orario definito nel Fuso orario IANA Database, ad esempio "America/New_York".
  • departure_time contiene l'orario di partenza, specificato come Oggetto Time.
  • headsign specifica la direzione in cui proseguire su questa linea, come indicato sul veicolo o alla fermata di partenza. Spesso si tratta della stazione capolinea.
  • headway se disponibile, specifica il numero previsto di secondi tra le partenze dalla stessa fermata in questo momento. Per Ad esempio, con un valore headway pari a 600, ci si aspetta un dieci minuti di attesa se perdi l'autobus.
  • line contiene un elemento TransitLine oggetto letterale che contiene informazioni sulla linea di transito utilizzata in questo passaggio. TransitLine fornisce il nome e l'operatore linea, insieme alle altre proprietà descritte in TransitLine documentazione di riferimento.
  • num_stops contiene il numero di tappe in questo passaggio. Include la fermata di arrivo, ma non la fermata di partenza. Ad esempio, se le indicazioni stradali prevedono la partenza dalla fermata A, il passaggio dalle fermate B e C, e arrivando alla fermata D, num_stops restituirà 3.

Linea di trasporto pubblico

L'oggetto TransitLine espone le seguenti proprietà:

  • name contiene il nome completo di questa linea di trasporto pubblico. ad es. "7 Avenue Express" o "14th St Crosstown".
  • short_name contiene il nome breve di questo trasporto pubblico dalla riga di comando. Normalmente è un numero di riga, ad esempio "2" o "M14".
  • agencies è un array contenente un singolo Oggetto TransitAgency. L'oggetto TransitAgency fornisce informazioni sull'operatore di questa linea, tra cui seguenti proprietà:
    • name contiene il nome dell'azienda di trasporto pubblico.
    • phone contiene il numero di telefono del trasporto pubblico agenzia.
    • url contiene l'URL dell'azienda di trasporto pubblico.

    Nota: se visualizzi manualmente le indicazioni di trasporto pubblico invece di utilizzare l'oggetto DirectionsRenderer, devi mostra i nomi e gli URL delle aziende di trasporto pubblico che forniscono la corsa che consentono di analizzare i dati e visualizzare i risultati.

  • url contiene un URL per questa linea di trasporto pubblico fornito da dell'azienda di trasporto pubblico.
  • icon contiene un URL per l'icona associata a questa riga. Per la maggior parte delle città vengono usate icone generiche che variano in base al tipo di veicolo. Alcune le linee di trasporto pubblico, come la metropolitana di New York, hanno icone specifiche per su quella riga.
  • color contiene il colore comunemente utilizzato nella segnaletica trasporto pubblico. Il colore verrà specificato come stringa esadecimale, ad esempio: #FF0033.
  • text_color contiene il colore del testo di uso comune segnaletica di questa linea. Il colore verrà specificato come stringa esadecimale.
  • vehicle contiene un oggetto Vehicle che include le seguenti proprietà:
      .
    • name contiene il nome del veicolo su questa riga. Ad esempio: "Metrò."
    • type contiene il tipo di veicolo utilizzato su questa linea. Consulta la documentazione Tipo di veicolo per un l'elenco completo dei valori supportati.
    • icon contiene un URL per l'icona comunemente associata con questo tipo di veicolo.
    • local_icon contiene l'URL dell'icona associata con questo tipo di veicolo, in base alla segnaletica di trasporto locale.

Tipo di veicolo

L'oggetto VehicleType espone quanto segue proprietà:

Valore Definizione
VehicleType.RAIL Treno.
VehicleType.METRO_RAIL Metropolitana leggera.
VehicleType.SUBWAY Metropolitana leggera sotterranea.
VehicleType.TRAM Metropolitana leggera sopra il suolo.
VehicleType.MONORAIL Monorotaia.
VehicleType.HEAVY_RAIL Ferrovia pesante.
VehicleType.COMMUTER_TRAIN Treni suburbani.
VehicleType.HIGH_SPEED_TRAIN Treno ad alta velocità.
VehicleType.BUS Autobus.
VehicleType.INTERCITY_BUS Autobus interurbano.
VehicleType.TROLLEYBUS Filobus.
VehicleType.SHARE_TAXI Il taxi condiviso è un tipo di autobus con la possibilità di scendere e prendere per i passeggeri lungo il percorso.
VehicleType.FERRY Traghetto.
VehicleType.CABLE_CAR Veicolo che funziona su un cavo, solitamente a terra. Cavo aerea le auto possono essere del tipo VehicleType.GONDOLA_LIFT.
VehicleType.GONDOLA_LIFT Una funivia aerea.
VehicleType.FUNICULAR Veicolo tirato su una ripida pendenza con un cavo. Una funicolare è generalmente composto da due auto, ciascuna delle quali funge da contrappeso. dell'altro.
VehicleType.OTHER Tutti gli altri veicoli restituiranno questo tipo.

Ispezione dei risultati di DirectionsResults

I componenti DirectionsResults: DirectionsRoute, DirectionsLeg DirectionsStep e TransitDetails, potrebbero essere vengono esaminati e utilizzati durante l'analisi delle risposte alle indicazioni stradali.

Importante: se stai eseguendo il rendering del trasporto pubblico le indicazioni stradali manualmente anziché utilizzare DirectionsRenderer devi visualizzare i nomi e gli URL delle aziende di trasporto pubblico per gestire i risultati della corsa.

L'esempio seguente mostra le indicazioni a piedi per un determinato turista attrazioni di New York. Ispezioniamo il percorso DirectionsStep per aggiungere indicatori per ogni passaggio e allegare informazioni a un InfoWindow con istruzioni per il passaggio.

Nota: poiché calcoliamo le indicazioni a piedi, visualizziamo anche eventuali avvisi per l'utente in un riquadro <div> separato.

var map;
var directionsRenderer;
var directionsService;
var stepDisplay;
var markerArray = [];

function initMap() {
  // Instantiate a directions service.
  directionsService = new google.maps.DirectionsService();

  // Create a map and center it on Manhattan.
  var manhattan = new google.maps.LatLng(40.7711329, -73.9741874);
  var mapOptions = {
    zoom: 13,
    center: manhattan
  }
  map = new google.maps.Map(document.getElementById('map'), mapOptions);

  // Create a renderer for directions and bind it to the map.
  var rendererOptions = {
    map: map
  }
  directionsRenderer = new google.maps.DirectionsRenderer(rendererOptions)

  // Instantiate an info window to hold step text.
  stepDisplay = new google.maps.InfoWindow();
}

function calcRoute() {

  // First, clear out any existing markerArray
  // from previous calculations.
  for (i = 0; i < markerArray.length; i++) {
    markerArray[i].setMap(null);
  }

  // Retrieve the start and end locations and create
  // a DirectionsRequest using WALKING directions.
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
      origin: start,
      destination: end,
      travelMode: 'WALKING'
  };

  // Route the directions and pass the response to a
  // function to create markers for each step.
  directionsService.route(request, function(response, status) {
    if (status == "OK") {
      var warnings = document.getElementById("warnings_panel");
      warnings.innerHTML = "" + response.routes[0].warnings + "";
      directionsRenderer.setDirections(response);
      showSteps(response);
    }
  });
}

function showSteps(directionResult) {
  // For each step, place a marker, and add the text to the marker's
  // info window. Also attach the marker to an array so we
  // can keep track of it and remove it when calculating new
  // routes.
  var myRoute = directionResult.routes[0].legs[0];

  for (var i = 0; i < myRoute.steps.length; i++) {
      var marker = new google.maps.Marker({
        position: myRoute.steps[i].start_point,
        map: map
      });
      attachInstructionText(marker, myRoute.steps[i].instructions);
      markerArray[i] = marker;
  }
}

function attachInstructionText(marker, text) {
  google.maps.event.addListener(marker, 'click', function() {
    stepDisplay.setContent(text);
    stepDisplay.open(map, marker);
  });
}

Nel corpo del codice HTML:

<div>
<strong>Start: </strong>
<select id="start">
  <option value="penn station, new york, ny">Penn Station</option>
  <option value="grand central station, new york, ny">Grand Central Station</option>
  <option value="625 8th Avenue New York NY 10018">Port Authority Bus Terminal</option>
  <option value="staten island ferry terminal, new york, ny">Staten Island Ferry Terminal</option>
  <option value="101 E 125th Street, New York, NY">Harlem - 125th St Station</option>
</select>
<strong>End: </strong>
<select id="end" onchange="calcRoute();">
  <option value="260 Broadway New York NY 10007">City Hall</option>
  <option value="W 49th St & 5th Ave, New York, NY 10020">Rockefeller Center</option>
  <option value="moma, New York, NY">MOMA</option>
  <option value="350 5th Ave, New York, NY, 10118">Empire State Building</option>
  <option value="253 West 125th Street, New York, NY">Apollo Theatre</option>
  <option value="1 Wall St, New York, NY">Wall St</option>
</select>
<div>

Visualizza esempio

Utilizzo dei waypoint nelle route

Come indicato in DirectionsRequest, puoi anche specificare waypoint (di tipo DirectionsWaypoint) per il calcolo percorsi che utilizzano il servizio Indicazioni stradali a piedi, in bicicletta o in auto indicazioni stradali. I waypoint non sono disponibili per le indicazioni con il trasporto pubblico. I waypoint consentono di calcolare i percorsi attraverso altre località, in In questo caso, il percorso restituito passa attraverso le tappe indicate.

Un waypoint è costituito dai seguenti campi:

  • location (obbligatorio) specifica l'indirizzo del waypoint.
  • stopover (facoltativo) indica se questo la tappa è una tappa effettiva del percorso (true) o solo una preferenza, per indirizzare località (false). Gli scali sono true per impostazione predefinita.
di Gemini Advanced.

Per impostazione predefinita, il servizio Indicazioni stradali calcola un percorso tramite le tappe indicate nel loro ordine. Facoltativamente, potrebbe superare optimizeWaypoints: true in DirectionsRequest per consentire al servizio Indicazioni stradali di ottimizzare il percorso fornito riorganizzando le tappe in in modo più efficiente. Questa ottimizzazione è un'applicazione problema di venditore durante un viaggio.) Il tempo di percorrenza è il fattore principale ottimizzato, ma ci sono altri fattori come distanza, numero di svolte e molti altri possono essere presi in considerazione per decidere qual è il percorso più efficiente. Tutti le tappe devono essere tappe affinché il servizio Indicazioni stradali percorso.

Se indichi al servizio Indicazioni stradali di ottimizzare l'ordine delle i suoi waypoint, il loro ordine verrà restituito waypoint_order nel campo Oggetto DirectionsResult.

L'esempio seguente calcola gli itinerari attraverso più paesi negli Stati Uniti usando una varietà di punti di partenza, di arrivo, e le tappe. Per selezionare più tappe, premi Ctrl+Clic quando selezioni gli elementi nell'elenco. Tieni presente che ispezioniamo routes.start_address e routes.end_address per fornire con il testo relativo al punto di partenza e di arrivo di ogni percorso.

TypeScript

function initMap(): void {
  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer();
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 6,
      center: { lat: 41.85, lng: -87.65 },
    }
  );

  directionsRenderer.setMap(map);

  (document.getElementById("submit") as HTMLElement).addEventListener(
    "click",
    () => {
      calculateAndDisplayRoute(directionsService, directionsRenderer);
    }
  );
}

function calculateAndDisplayRoute(
  directionsService: google.maps.DirectionsService,
  directionsRenderer: google.maps.DirectionsRenderer
) {
  const waypts: google.maps.DirectionsWaypoint[] = [];
  const checkboxArray = document.getElementById(
    "waypoints"
  ) as HTMLSelectElement;

  for (let i = 0; i < checkboxArray.length; i++) {
    if (checkboxArray.options[i].selected) {
      waypts.push({
        location: (checkboxArray[i] as HTMLOptionElement).value,
        stopover: true,
      });
    }
  }

  directionsService
    .route({
      origin: (document.getElementById("start") as HTMLInputElement).value,
      destination: (document.getElementById("end") as HTMLInputElement).value,
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: google.maps.TravelMode.DRIVING,
    })
    .then((response) => {
      directionsRenderer.setDirections(response);

      const route = response.routes[0];
      const summaryPanel = document.getElementById(
        "directions-panel"
      ) as HTMLElement;

      summaryPanel.innerHTML = "";

      // For each route, display summary information.
      for (let i = 0; i < route.legs.length; i++) {
        const routeSegment = i + 1;

        summaryPanel.innerHTML +=
          "<b>Route Segment: " + routeSegment + "</b><br>";
        summaryPanel.innerHTML += route.legs[i].start_address + " to ";
        summaryPanel.innerHTML += route.legs[i].end_address + "<br>";
        summaryPanel.innerHTML += route.legs[i].distance!.text + "<br><br>";
      }
    })
    .catch((e) => window.alert("Directions request failed due to " + status));
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

function initMap() {
  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer();
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 6,
    center: { lat: 41.85, lng: -87.65 },
  });

  directionsRenderer.setMap(map);
  document.getElementById("submit").addEventListener("click", () => {
    calculateAndDisplayRoute(directionsService, directionsRenderer);
  });
}

function calculateAndDisplayRoute(directionsService, directionsRenderer) {
  const waypts = [];
  const checkboxArray = document.getElementById("waypoints");

  for (let i = 0; i < checkboxArray.length; i++) {
    if (checkboxArray.options[i].selected) {
      waypts.push({
        location: checkboxArray[i].value,
        stopover: true,
      });
    }
  }

  directionsService
    .route({
      origin: document.getElementById("start").value,
      destination: document.getElementById("end").value,
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: google.maps.TravelMode.DRIVING,
    })
    .then((response) => {
      directionsRenderer.setDirections(response);

      const route = response.routes[0];
      const summaryPanel = document.getElementById("directions-panel");

      summaryPanel.innerHTML = "";

      // For each route, display summary information.
      for (let i = 0; i < route.legs.length; i++) {
        const routeSegment = i + 1;

        summaryPanel.innerHTML +=
          "<b>Route Segment: " + routeSegment + "</b><br>";
        summaryPanel.innerHTML += route.legs[i].start_address + " to ";
        summaryPanel.innerHTML += route.legs[i].end_address + "<br>";
        summaryPanel.innerHTML += route.legs[i].distance.text + "<br><br>";
      }
    })
    .catch((e) => window.alert("Directions request failed due to " + status));
}

window.initMap = initMap;
index.js

Limiti e restrizioni dei waypoint

Si applicano le restrizioni e i limiti di utilizzo seguenti:

  • Il numero massimo di tappe consentite durante l'utilizzo del servizio Directions nell'API Maps JavaScript è 25, più il luogo di partenza e quello di destinazione. I limiti sono gli stessi per API Directions web.
  • Per servizio web dell'API Directions, ai clienti 25 tappe, oltre a luogo di partenza e destinazione.
  • Ai clienti del piano Google Maps Platform Premium sono consentiti 25 tappe, oltre a luogo di partenza e destinazione.
  • I waypoint non sono supportati per le indicazioni di trasporto pubblico.

Indicazioni stradali trascinabili

Gli utenti possono modificare le indicazioni in bicicletta, a piedi o in auto visualizzate utilizzando un DirectionsRenderer in modo dinamico, se lo sono trascinabile, che consente a un utente di selezionare e modificare i percorsi facendo clic e trascinando sulla mappa i percorsi risultanti. Devi indicare se il rendering di un renderer consente il trascinamento indicazioni stradali impostando la relativa proprietà draggable a true. Le indicazioni stradali con il trasporto pubblico non possono essere trascinate.

Quando è possibile trascinare le direzioni, un utente può selezionare qualsiasi punto il percorso (o waypoint) del risultato visualizzato e sposta in una nuova posizione. DirectionsRenderer verrà aggiornato in modo dinamico per mostrare il percorso modificato. Al momento del rilascio, la tappa di transizione verrà aggiunta alla mappa (indicata da un piccolo indicatore bianco). La selezione e lo spostamento di un segmento del percorso modificare quel tratto del percorso, selezionando e spostando un indicatore di tappa (compresi i punti di partenza e di arrivo) altera la tratti del percorso che passa per la tappa in questione.

Poiché le direzioni trascinabili vengono modificate e visualizzate sul lato client, ti consigliamo di monitorare e gestire directions_changed il giorno DirectionsRenderer per ricevere una notifica l'utente ha modificato le indicazioni stradali visualizzate.

Il seguente codice mostra un viaggio da Perth, sulla costa occidentale dell'Australia a Sydney, sulla costa orientale. Il codice monitora directions_changed evento per aggiornare la distanza totale di tutte le tappe del viaggio.

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -24.345, lng: 134.46 }, // Australia.
    }
  );

  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer({
    draggable: true,
    map,
    panel: document.getElementById("panel") as HTMLElement,
  });

  directionsRenderer.addListener("directions_changed", () => {
    const directions = directionsRenderer.getDirections();

    if (directions) {
      computeTotalDistance(directions);
    }
  });

  displayRoute(
    "Perth, WA",
    "Sydney, NSW",
    directionsService,
    directionsRenderer
  );
}

function displayRoute(
  origin: string,
  destination: string,
  service: google.maps.DirectionsService,
  display: google.maps.DirectionsRenderer
) {
  service
    .route({
      origin: origin,
      destination: destination,
      waypoints: [
        { location: "Adelaide, SA" },
        { location: "Broken Hill, NSW" },
      ],
      travelMode: google.maps.TravelMode.DRIVING,
      avoidTolls: true,
    })
    .then((result: google.maps.DirectionsResult) => {
      display.setDirections(result);
    })
    .catch((e) => {
      alert("Could not display directions due to: " + e);
    });
}

function computeTotalDistance(result: google.maps.DirectionsResult) {
  let total = 0;
  const myroute = result.routes[0];

  if (!myroute) {
    return;
  }

  for (let i = 0; i < myroute.legs.length; i++) {
    total += myroute.legs[i]!.distance!.value;
  }

  total = total / 1000;
  (document.getElementById("total") as HTMLElement).innerHTML = total + " km";
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -24.345, lng: 134.46 }, // Australia.
  });
  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer({
    draggable: true,
    map,
    panel: document.getElementById("panel"),
  });

  directionsRenderer.addListener("directions_changed", () => {
    const directions = directionsRenderer.getDirections();

    if (directions) {
      computeTotalDistance(directions);
    }
  });
  displayRoute(
    "Perth, WA",
    "Sydney, NSW",
    directionsService,
    directionsRenderer,
  );
}

function displayRoute(origin, destination, service, display) {
  service
    .route({
      origin: origin,
      destination: destination,
      waypoints: [
        { location: "Adelaide, SA" },
        { location: "Broken Hill, NSW" },
      ],
      travelMode: google.maps.TravelMode.DRIVING,
      avoidTolls: true,
    })
    .then((result) => {
      display.setDirections(result);
    })
    .catch((e) => {
      alert("Could not display directions due to: " + e);
    });
}

function computeTotalDistance(result) {
  let total = 0;
  const myroute = result.routes[0];

  if (!myroute) {
    return;
  }

  for (let i = 0; i < myroute.legs.length; i++) {
    total += myroute.legs[i].distance.value;
  }

  total = total / 1000;
  document.getElementById("total").innerHTML = total + " km";
}

window.initMap = initMap;
index.js
Visualizza esempio

Prova Sample