Google Maps API：与航点的总距离 [英] Google Maps API: Total distance with waypoints

问题描述

我试图计算一条路线的总距离，但是不知何故，我的代码只返回到第一个航点的距离，而不是总距离。

这是我的代码：

pre code函数calcRoute（homebase，from，to，via）{
var start = from;
var end = to;
var wypt = [];
wypt.push（{
location：via，
stopover：true}）;
$ b 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;
}
}）;

解决方案

腿[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（地图）; calcRoute（）;} google.maps.event.addDomListener（window，'load'，initialize）;函数calcRoute（）{var request = {// from：Blackpool to：Preston to：Blackburn origin：Blackpool，UK，目的地：英国布莱克本，航点：[{位置：普雷斯顿，英国，中途停留：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（var i = 0; i< route.legs.length; i ++）{var routeSegment = i + 1; summaryPanel .innerHTML + =< b>路由段：+ 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）+分钟;}

html {height：100％} body {身高：100％; margin：0px; < script src =https：//

I'm trying to calculate the total distance for a route with a single waypoint in it, but somehow my code only returns the distance to the first waypoint instead of the total distance.

Here's my code:

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

解决方案

The reason you only get the distance for legs[0] is because that is what your code is calculating. You need to sum up the distances of all the legs:

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

code snippet:

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>

这篇关于Google Maps API：与航点的总距离的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！