Google Maps API v3中的方向距离

Question

Google Maps API v3中的方向距离

16

我正在尝试着如何使用Google Maps Directions Demo获取成功路线的距离。

这是我目前拥有的代码：

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

在v2版本中，我可以轻松完成这个操作，只是在尝试找到v3版本的等效方法时遇到了一些问题。

- Yawn

欢迎来到 Stack Overflow... 这是一个有趣的问题，因为它似乎在 v3 API 参考文档中没有记录。 - Daniel Vassallo

你也可以查看stackoverflow上以下回答：https://dev59.com/mnA75IYBdhLWcg3wg5Zh - user672365

2个回答

3

所选的答案只适用于路线只有一个途经点的情况。如果您有多个途经点，以下是如何获取完整长度的方法：

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

- Radoslav Trenev

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Daniel Vassallo · Accepted Answer

虽然官方似乎没有记录，但看起来你可以遍历从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>

显示距离和时间的截图： Google Maps API v3 Directions Demo