如何通過Google Maps API V3獲得總駕駛距離？

我曾經是能夠得到這樣的：如何通過Google Maps API V3獲得總駕駛距離？

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

但看起來他們對我改變了their API！看起來像trips已不在那裏，routes只會給你一堆腿......我真的必須迭代所有的腿，現在總結距離嗎？

來源

2010-07-15 mpen

按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);

其實，這只是正常工作也一樣，如果你沒有任何航點：

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

下面是使用lodash一個更全面的例子。如果您不使用它，請不要太難替換flatBy和sum。

/** 
* 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)); 
      } 
     }); 
    }); 
}

請記住，包括谷歌地圖API：

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

而且，我敢肯定他們的服務條款要求你顯示谷歌地圖了。

來源

2010-07-15 00:44:10 mpen

到這裏看看：

The Directions Results Object

看起來你現在要總結每條腿的距離。

腿[]包含爲DirectionsLeg對象，每個對象的包含有關路線內給定路線的腿，從兩個位置信息的陣列。對於每個航路點，將會有一個單獨的支路或指定的目的地。（具有的航線沒有任何航點將精確包含一個 DirectionsLeg。）每個航段包含一個系列DirectionSteps。

來源

2010-07-15 00:34:24

所以......正是我所說的！雖然我誤解了一個「腿」是什麼。認爲這是他們所說的「步驟」。迭代1條腿並不那麼糟糕。 – mpen 2010-07-15 00:43:39

馬克的答案是以米爲單位的totalDistance和秒爲totalDuration。

如果您在美國並希望與一個小數點英里，乘象這樣：

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

如果你想分鐘：

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

來源

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>

來源

2013-06-13 04:53:55

您可以通過使用容易獲得：通過使用

距離：

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

Du配給使用：

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

來源

2015-04-25 09:05:53 Reeves

只有你有1條腿。從A點到B點。對於多條腿，您必須根據上面的@mpen答案對腿的數值進行求和，然後轉換distance.value和duration.value秒的距離。 – 2016-10-31 20:32:44

如何通過Google Maps API V3獲得總駕駛距離？

回答

相關問題