将航点添加到 Google 距离矩阵以确定里程

Question

我使用 Google 的地图距离矩阵创建了一个simple jsfiddle here 来确定 2 点之间的里程。这很好用，但后来我有兴趣确定超过 2 点之间的里程。但是，我无法做到这一点，因为我认为我没有正确实施它。有谁知道如何将航路点添加到谷歌的距离矩阵以确定它们之间的最佳路线/里程？例如，如果我想通过许多其他地方从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

来自documentation for the Distance Matrix

Google 的距离矩阵服务计算旅行距离和行程 使用给定模式的多个起点和目的地之间的持续时间 旅行。

此服务不返回详细的路线信息。路线信息， 包括折线和文本方向，可以通过传递 路线服务的所需单一起点和目的地。

如果您需要通过一组（少于 8 个）航点确定 2 个地点之间的距离，请使用 directions service

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>