Google Maps API v3中的路線距離

Question

我正在嘗試研究如何使用Google地圖方向演示來獲取成功路線的距離。

這是我到目前為止的代碼：

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等效問題時遇到了麻煩。

Answer 1

雖然它似乎沒有正式記錄，但看起來你可以遍歷DirectionsService.route()方法的response.trips[0].routes[0].distance.value ： 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演示演示

Answer 2

如果路線只有一個航點，則所選答案可正常工作。 如果您有多個航點，以下是如何獲得全長：

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

Google Maps API v3中的路線距離

問題描述

2 個解決方案

解決方案1
50 2010-03-18 19:14:05

解決方案2
2 2015-04-27 17:21:50

Google Maps API v3中的路線距離

問題描述

2 個解決方案

解決方案1 50 2010-03-18 19:14:05

解決方案2 2 2015-04-27 17:21:50

解決方案1
50 2010-03-18 19:14:05

解決方案2
2 2015-04-27 17:21:50