在谷歌地图中计算距离和持续时间答案

【问题标题】：Calculate distance and duration through in Google Maps在谷歌地图中计算距离和持续时间
【发布时间】：2010-03-09 09:50:52
【问题描述】：

我需要使用谷歌地图（印度境内）通过地理编码计算距离和持续时间。任何代码或解决方案都会有所帮助。

【问题讨论】：

标签： google-maps geocoding

【解决方案1】：

您可能想要使用GDirections.getDistance() 和GDirections.getDuration() 方法，如下例所示：

<!DOCTYPE html>
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
   <title>Google Maps GDirections Demo</title> 
   <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false" 
           type="text/javascript"></script> 
</head> 
<body onunload="GUnload()" style="font-family: Arial; font-size: 12px;"> 

   <div id="map" style="width: 400px; height: 300px"></div> 
   <div id="duration">Duration: </div> 
   <div id="distance">Distance: </div> 

   <script type="text/javascript"> 

   var map = new GMap2(document.getElementById("map"));
   var directions = new GDirections(map);

   directions.load("from: Chennai, India to: Mumbai, India");

   GEvent.addListener(directions, "load", function() {

       // Display the distance from the GDirections.getDistance() method:
       document.getElementById('distance').innerHTML += 
           directions.getDistance().meters + " meters";

       // Display the duration from the GDirections.getDuration() method:
       document.getElementById('duration').innerHTML += 
           directions.getDuration().seconds + " seconds";
   });
   </script> 
</body> 
</html>

【讨论】：

【解决方案2】：

    <!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>

【讨论】：