Google Maps API：與航點的總距離

Question

我正在嘗試計算其中有單個航點的航線的總距離，但不知何故，我的代碼只返回到第一個航點的距離，而不是總距離。

這裏是我的代碼：

function calcRoute(homebase,from,to,via){ 
var start = from; 
var end = to; 
var wypt = [ ]; 
wypt.push({ 
      location:via, 
      stopover:true}); 

var request = { 
    origin:start, 
    destination:end, 
    waypoints:wypt,  
    optimizeWaypoints: true, 
    travelMode: google.maps.DirectionsTravelMode.DRIVING, 
    unitSystem: google.maps.DirectionsUnitSystem.METRIC 
}; 

directionsService.route(request, function(response, status) { 
    if (status == google.maps.DirectionsStatus.OK) { 
    directionsDisplay.setDirections(response); 

    var distance = response.routes[0].legs[0].distance.text; 
    var time_taken = response.routes[0].legs[0].duration.text; 

    var calc_distance = response.routes[0].legs[0].distance.value; 
    } 
}); 
} 

Answer 1

原因你只能得到腿部的距離[0]是因爲這是你的代碼計算。你需要總結所有的腿的距離：

http://www.geocodezip.com/v3_GoogleEx_directions-waypoints_totalDist.html

代碼片段：

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

 
function initialize() { 
 
    directionsDisplay = new google.maps.DirectionsRenderer(); 
 
    var chicago = new google.maps.LatLng(41.850033, -87.6500523); 
 
    var myOptions = { 
 
    zoom: 6, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
    center: chicago 
 
    } 
 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
 
    directionsDisplay.setMap(map); 
 
    calcRoute(); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize); 
 

 
function calcRoute() { 
 

 
    var request = { 
 
    // from: Blackpool to: Preston to: Blackburn 
 
    origin: "Blackpool,UK", 
 
    destination: "Blackburn,UK", 
 
    waypoints: [{ 
 
     location: "Preston,UK", 
 
     stopover: true 
 
    }], 
 
    optimizeWaypoints: true, 
 
    travelMode: google.maps.DirectionsTravelMode.WALKING 
 
    }; 
 
    directionsService.route(request, function(response, status) { 
 
    if (status == google.maps.DirectionsStatus.OK) { 
 
     directionsDisplay.setDirections(response); 
 
     var route = response.routes[0]; 
 
     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].distance.text + "<br /><br />"; 
 
     } 
 
     computeTotalDistance(response); 
 
    } else { 
 
     alert("directions response " + status); 
 
    } 
 
    }); 
 
} 
 

 
function computeTotalDistance(result) { 
 
    var totalDist = 0; 
 
    var totalTime = 0; 
 
    var myroute = result.routes[0]; 
 
    for (i = 0; i < myroute.legs.length; i++) { 
 
    totalDist += myroute.legs[i].distance.value; 
 
    totalTime += myroute.legs[i].duration.value; 
 
    } 
 
    totalDist = totalDist/1000. 
 
    document.getElementById("total").innerHTML = "total distance is: " + totalDist + " km<br>total time is: " + (totalTime/60).toFixed(2) + " minutes"; 
 
}

html { 
 
    height: 100% 
 
} 
 
body { 
 
    height: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.google.com/maps/api/js"></script> 
 
<div id="map_canvas" style="float:left;width:70%;height:100%;"></div> 
 
<div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px"> 
 
    <div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div> 
 
    <div id="total"></div> 
 
</div>