Come ottenere una distanza di guida totale con l'API V3 di Google Maps?

ho usato per essere in grado di ottenere in questo modo:Come ottenere una distanza di guida totale con l'API V3 di Google Maps?

directionsService.route(directionsRequest, function(directionsResult, directionsStatus) { 
    var directionsRenderer = new google.maps.DirectionsRenderer({ 
     directions: directionsResult, 
     map: map 
    }); 
    $('#distance').text(directionsResult.trips[0].routes[0].distance.text) 
    $('#duration').text(directionsResult.trips[0].routes[0].duration.text) 
})

ma sembra che hanno cambiato their API su di me! Sembra che trips non ci sia più, e routes ti dia solo un mucchio di gambe ... devo davvero scorrere tutte le gambe e riassumere la distanza ora?

fonte

2010-07-15 mpen

Secondo Leniel's answer:

var totalDistance = 0; 
var totalDuration = 0; 
var legs = directionsResult.routes[0].legs; 
for(var i=0; i<legs.length; ++i) { 
    totalDistance += legs[i].distance.value; 
    totalDuration += legs[i].duration.value; 
} 
$('#distance').text(totalDistance); 
$('#duration').text(totalDuration);

In realtà, questo funziona bene anche se non si dispone di alcun waypoint:

$('#distance').text(directionsResult.routes[0].legs[0].distance.text); 
$('#duration').text(directionsResult.routes[0].legs[0].duration.text);

Ecco un esempio più completo utilizzando lodash . Non dovrebbe essere troppo difficile sostituire flatBy e sum se non lo stai usando.

/** 
* Computes the total driving distance between addresses. Result in meters. 
* 
* @param {string[]} addresses Array of address strings. Requires two or more. 
* @returns {Promise} Driving distance in meters 
*/ 
export default function calculateDistance(addresses) { 
    return new Promise((resolve, reject) => { 
     if(addresses.length < 2) { 
      return reject(new Error(`Distance calculation requires at least 2 stops, got ${addresses.length}`)); 
     } 

     const {TravelMode, DirectionsService, DirectionsStatus} = google.maps; 

     const directionsService = new DirectionsService; 
     const origin = addresses.shift(); 
     const destination = addresses.pop(); 
     const waypoints = addresses.map(stop => ({location: stop})); 

     directionsService.route({ 
      origin, 
      waypoints, 
      destination, 
      travelMode: TravelMode.DRIVING, 
     }, (response, status) => { 
      if(status === DirectionsStatus.OK) { 
       let distances = _.flatMap(response.routes, route => _.flatMap(route.legs, leg => leg.distance.value)); 

       return resolve(_.sum(distances)); 
      } else { 
       return reject(new Error(status)); 
      } 
     }); 
    }); 
}

ricordarsi di includere l'API di Google Maps:

<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places"></script>

Inoltre, sono abbastanza sicuro loro TOS richiedono di visualizzare una mappa di Google anche.

fonte

2010-07-15 00:44:10 mpen

dare uno sguardo qui:

The Directions Results Object

Sembra che adesso si deve riassumere ciascuna distanza gamba.

gambe [] contiene un array di oggetti DirectionsLeg, ognuno dei quali contiene informazioni su una gamba del percorso, da due posizioni all'interno percorso determinato. Una gamba separata sarà essere presente per ogni waypoint o la destinazione specificata. (Una rotta con nessun waypoint conterrà esattamente un DirectionsLeg.) Ogni tappa è costituita da una serie di DirectionSteps.

fonte

2010-07-15 00:34:24

Quindi ... esattamente quello che ho detto! Anche se ero disinformato su cosa fosse una "gamba". Ho pensato che fosse quello che chiamano un "passo". L'iterazione su una gamba non è poi così male. – mpen

La risposta di Mark è in metri per totalDistance e secondi per totalDuration.

Se sei negli Stati Uniti.e vogliono miglia con un solo punto decimale, moltiplicare in questo modo:

var METERS_TO_MILES = 0.000621371192; 
$('#distance').text((Math.round(totalDistance * METERS_TO_MILES * 10)/10)+' miles');

E se si vuole minuti:

$('#distance').text(Math.round(totalDuration/60)+' minutes');

fonte

2011-11-30 22:09:01 cacheflowe

<!DOCTYPE html> 
<html> 
<head> 
    <title>Simple Map</title> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <style> 
     html, body, #map-canvas { 
      margin: 0; 
      padding: 0; 
      height: 100%; 
     } 
    </style> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
    <script> 

     var directionsDisplay; 
     var directionsService = new google.maps.DirectionsService(); 
     var map; 

     function initialize() { 
      directionsDisplay = new google.maps.DirectionsRenderer(); 
      var chicago = new google.maps.LatLng(26.912417, 75.787288); 
      var mapOptions = { 
       zoom: 7, 
       mapTypeId: google.maps.MapTypeId.ROADMAP, 
       center: chicago 
      } 
      map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 
      directionsDisplay.setMap(map); 

     } 

     function calcRoute() { 
      var start = document.getElementById("start").value; 
      var end = document.getElementById("end").value; 


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


      var request = { 
       origin: start, 
       destination: end, 
       waypoints: waypts, 
       travelMode: google.maps.TravelMode.DRIVING 
      }; 
      directionsService.route(request, function(response, status) { 
       if(status == google.maps.DirectionsStatus.OK) { 
        directionsDisplay.setDirections(response); 
        var route = response.routes[0]; 
        // alert(route.legs[1].duration.text); 
        var summaryPanel = document.getElementById('directions_panel'); 
        summaryPanel.innerHTML = ''; 
        // For each route, display summary information. 
        for(var i = 0; i < route.legs.length; i++) { 
         var 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].duration.text + '<br>'; 
         summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>'; 
        } 

       } 
      }); 
     } 

     google.maps.event.addDomListener(window, 'load', initialize); 

    </script> 
</head> 
<body> 
    <!-- <div id="map-canvas"></div>--> 
    <div> 
     <strong>Start: </strong> 
     <select id="start" onChange="calcRoute();"> 
      <option value="Jaipur">Jaipur</option> 
      <option value="jagatpura">jagatpura</option> 
      <option value="malviya nagar, Jaipur">Malviya Nagar</option> 
      <option value="khatu">Sikar</option> 
      <option value="Dausa">Dausa</option> 
      <option value="Luniawas">Luniyawas</option> 
      <option value="Karoli">Karoli</option> 
      <option value="Baran">Baran</option> 
      <option value="Sawai Madhopur">Sawai Madhopur</option> 
      <option value="Udaipur">Udaipur</option> 
      <option value="Bikaner">Bikaner</option> 
      <option value="Churu">Churu</option> 
     </select> 
     <strong>End: </strong> 
     <select id="end" onChange="calcRoute();"> 
      <option value="Jaipur">Jaipur</option> 
      <option value="bassi">bassi</option> 
      <option value="goner">goner</option> 
      <option value="Khaniya">Khaniya</option> 
      <option value="Luniawas">Luniyawas</option> 
      <option value="Ajmer">Ajmer</option> 
      <option value="Karoli">Karoli</option> 
      <option value="Baran">Baran</option> 
      <option value="Sawai Madhopur">Sawai Madhopur</option> 
      <option value="Udaipur">Udaipur</option> 
      <option value="Bikaner">Bikaner</option> 
      <option value="Churu">Churu</option> 
     </select> 
    </div> 

    <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> 

     <select multiple id="waypoints" onChange="calcRoute();"> 
      <option value="bassi">bassi</input> 
      <option value="chainpura">chainpura</input> 
      <option value="Kanauta">Kanauta</input> 
     </select> 

    </div> 

    <div id="map-canvas" style="float:left;width:70%; height:40%"></div> 

    <div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div> 

</body> 
</html>

fonte

2013-06-13 04:53:55

si può facilmente ottenere utilizzando:

Distanza utilizzando :

directionsDisplay.directions.routes[0].legs[0].distance.text

Du razione utilizzando:

directionsDisplay.directions.routes[0].legs[0].duration.text

fonte

2015-04-25 09:05:53 Reeves

Solo se hai 1 gamba. Dal punto A al punto B. Per le gambe multiple devi sommare i valori delle gambe, come per la risposta @mpen sopra, e convertire i metri di distanza.valore e secondi di durata.valore –

Come ottenere una distanza di guida totale con l'API V3 di Google Maps?

risposta

Problemi correlati