2010-03-09 4 views

Répondre

2

Vous pouvez utiliser les méthodes GDirections.getDistance() et GDirections.getDuration(), comme dans l'exemple suivant:

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

Google Maps GDirections Demo

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