开发者

Calculate distance and duration through in Google Maps

开发者 https://www.devze.com 2022-12-22 14:01 出处:网络
I need to calculate the distance and the duration through geocodes using Google Maps (within India). Any code or solution w开发者_如何学编程ould help.You may want to use the GDirections.getDistance()

I need to calculate the distance and the duration through geocodes using Google Maps (within India). Any code or solution w开发者_如何学编程ould help.


You may want to use the GDirections.getDistance() and GDirections.getDuration() methods, as in the following example:

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

Calculate distance and duration through in Google Maps


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

精彩评论

暂无评论...
验证码 换一张
取 消