Javascript Google Maps API v3 中的方向距离
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2472482/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Directions distance in Google Maps API v3
提问by Yawn
I'm trying to work out how to use the Google Maps Directions Demoto get the distance from the successful directions.
我正在尝试研究如何使用Google Maps Directions Demo来获得与成功路线的距离。
This is the code I have so far:
这是我到目前为止的代码：
var googleMaps = {
// HTML Nodes
fromInput: google_maps_from,
toInput: google_maps_to,
// API Objects
dirService: new google.maps.DirectionsService(),
dirRenderer: new google.maps.DirectionsRenderer(),
map: null,
showDirections: function(dirResult, dirStatus) {
if (dirStatus != google.maps.DirectionsStatus.OK)
{
//Here we'll handle the errors a bit better :P
alert('Directions failed: ' + dirStatus);
return;
}
else
{
//Get the distance here
//onGDirectionsLoad();
}
// Show directions
googleMaps.dirRenderer.setMap(googleMaps.map);
googleMaps.dirRenderer.setPanel(document.getElementById("directions"));
googleMaps.dirRenderer.setDirections(dirResult);
},
getSelectedTravelMode: function() {
return google.maps.DirectionsTravelMode.DRIVING;
},
getSelectedUnitSystem: function() {
return google.maps.DirectionsUnitSystem.METRIC;
},
getDirections: function() {
var fromStr = googleMaps.fromInput;
var toStr = googleMaps.toInput;
var dirRequest = {
origin: fromStr,
destination: toStr,
travelMode: googleMaps.getSelectedTravelMode(),
unitSystem: googleMaps.getSelectedUnitSystem(),
provideTripAlternatives: true
};
googleMaps.dirService.route(dirRequest, googleMaps.showDirections);
},
init: function() {
googleMaps.map = new google.maps.Map(document.getElementById("map_canvas"), {
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Show directions onload
googleMaps.getDirections();
}
};
// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', googleMaps.init);
I could do this just fine in v2, just having trouble working out the v3 equivalent.
我可以在 v2 中很好地做到这一点，只是在计算 v3 等效项时遇到了麻烦。
回答by Daniel Vassallo
While it does not seem to be documented officially, it looks like you can traverse the response from the DirectionsService.route()method: response.trips[0].routes[0].distance.value, as in the following example:
虽然它似乎没有正式记录，但看起来您可以遍历DirectionsService.route()方法的响应: response.trips[0].routes[0].distance.value，如下例所示：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Directions Complex</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body style="font-family: Arial; font-size: 13px; color: red;">
<div id="map" style="width: 400px; height: 300px;"></div>
<div id="duration">Duration: </div>
<div id="distance">Distance: </div>
<script type="text/javascript">
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var myOptions = {
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), myOptions);
directionsDisplay.setMap(map);
var request = {
origin: 'Chicago',
destination: 'New York',
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
// Display the distance:
document.getElementById('distance').innerHTML +=
response.routes[0].legs[0].distance.value + " meters";
// Display the duration:
document.getElementById('duration').innerHTML +=
response.routes[0].legs[0].duration.value + " seconds";
directionsDisplay.setDirections(response);
}
});
</script>
</body>
</html>
Screenshot showing distance and duration:
显示距离和持续时间的屏幕截图：
回答by Radoslav Trenev
The chosen answer works properly if the route has only one waypoint. Here's how to get the full length if you have multiple waypoints:
如果路线只有一个航点，则选择的答案可以正常工作。如果您有多个航点，以下是获取完整长度的方法：
var distance= 0;
for(i = 0; i < response.routes[0].legs.length; i++){
distance += parseFloat(response.routes[0].legs[i].distance.value);
//for each 'leg'(route between two waypoints) we get the distance and add it to the total
}
console.log(distance);
