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

时间:2015-02-24 17:14:48

标签: javascript google-maps

我使用Google的地图距离矩阵创建了simple jsfiddle here,以确定2点之间的里程数。这很好,但后来我有兴趣确定超过2点之间的里程数。但是我对此并不是很了解,因为我认为我没有正确实现它。有没有人知道如何在谷歌的距离矩阵中添加航点以确定他们之间的最佳路线/里程?例如,如果我想通过一堆其他地方从The Underpass, Birmingham8 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);
    }
}

1 个答案:

答案 0 :(得分:4)

来自documentation for the Distance Matrix

  

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

     

此服务不会返回详细的路线信息。路线信息,   包括折线和文字方向,可以通过传递   所需的单一来源和路线服务的目的地。

如果您需要通过一组(少于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);
&#13;
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;
&#13;
<script src="https://maps.googleapis.com/maps/api/js"></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>
&#13;
&#13;
&#13;