将航点添加到Google Distance Matrix中以确定里程

Question

我在这里使用Google的Map Distance Matrix 创建了一个简单的jsfiddle，以确定2点之间的里程。效果很好，但后来我有兴趣确定2分以上的里程。但是，由于我认为我没有正确实现它，因此我无法做到这一点。有谁知道如何将路标添加到Google的距离矩阵中，以便确定驾车之间的最佳路线/里程？例如，如果我想从一开始The Underpass, Birmingham到8 Shandon Close, Birmingham通过一堆其他的地方。我的代码已包含在下面：

var origin = "The Underpass, Marston Green, Birmingham, West Midlands B40 1PA, UK",
    destinations = ["8 Shandon Close, Birmingham, West Midlands B32 3XB, UK","2 The Osiers, Elford, Tamworth, Staffordshire B79 9DG, UK","170 Bells Lane, Birmingham, West Midlands B14 5QA, UK","246 Long Acre, Birmingham, West Midlands B7 5JP, UK","28 Cuthbert Road, Birmingham, West Midlands B18 4AG, UK"]
    service = new google.maps.DistanceMatrixService();

service.getDistanceMatrix({
    origins: [origin],
    destinations: destinations,
    travelMode: google.maps.TravelMode.DRIVING,
    avoidHighways: false,
    avoidTolls: false,
    unitSystem: google.maps.UnitSystem.IMPERIAL
},
callback);

function callback(response, status) {
    var orig = document.getElementById("orig"),
        dest = document.getElementById("dest"),
        dist = document.getElementById("dist");

    if (status == "OK") {
        orig.value = response.originAddresses[0];
        dest.value = response.destinationAddresses[0];
        dist.value = response.rows[0].elements[0].distance.text;
    } else {
        alert("Error: " + status);
    }
}

Answer 1

从距离矩阵的文档中

Google的Distance Matrix服务使用给定的出行方式来计算多个起点和目的地之间的出行距离和旅行持续时间。

此服务不返回详细的路线信息。路线信息（包括折线和文字路线）可以通过将所需的单个起点和终点传递给路线服务来获得。

如果您需要通过一组（少于8个）航路点在2个地点之间建立距离，请使用路线服务

var directionsDisplay;
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 mapOptions = {
    zoom: 7,
    center: chicago
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  directionsDisplay.setMap(map);
  calcRoute();
}

var origin = "The Underpass, Marston Green, Birmingham, West Midlands B40 1PA, UK",
  destinations = ["8 Shandon Close, Birmingham, West Midlands B32 3XB, UK", "2 The Osiers, Elford, Tamworth, Staffordshire B79 9DG, UK", "170 Bells Lane, Birmingham, West Midlands B14 5QA, UK", "246 Long Acre, Birmingham, West Midlands B7 5JP, UK", "28 Cuthbert Road, Birmingham, West Midlands B18 4AG, UK"]


service = new google.maps.DistanceMatrixService();

function calcRoute() {
  var waypts = [];
  for (var i = 1; i < destinations.length - 1; i++) {
    waypts.push({
      location: destinations[i],
      stopover: true
    });
  }
  var request = {
    origin: origin,
    destination: destinations[destinations.length - 1],
    waypoints: waypts,
    optimizeWaypoints: true,
    travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
      var orig = document.getElementById("orig"),
        dest = document.getElementById("dest"),
        dist = document.getElementById("dist");

      orig.value = response.routes[0].legs[0].start_address;
      dest.value = response.routes[0].legs[3].end_address;
      var total_distance = 0.0;
      for (var i=0; i<response.routes[0].legs.length; i++) {
        total_distance += response.routes[0].legs[i].distance.value;
        }
      dist.value = total_distance +" meters";
    }
  });
}


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

html,
body,
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}
#panel {
  position: absolute;
  top: 5px;
  left: 50%;
  margin-left: -180px;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas"></div>
<div id="mileage-details">Origin:
  <input id="orig" type="text" style="width:35em">
  <br>
  <br>Destination:
  <input id="dest" type="text" style="width:35em">
  <br>
  <br>Distance:
  <input id="dist" type="text" style="width:35em">
</div>