2010-03-18 25 views
14

Staram się dowiedzieć, jak korzystać z Google Maps Directions Demo, aby uzyskać odległość od udanych kierunków.Dojazd odległość w Google Maps API v3

Jest to kod mam tak daleko:

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

mogłem zrobić to dobrze w v2, tylko kłopoty pracuje obecnie równowartość v3.

+0

Witamy w Stack Overflow ... To interesujące pytanie, ponieważ nie jest udokumentowane nigdzie w Dokumentacji API V3. –

+0

Możesz również spojrzeć na następującą odpowiedź na stackoverflow http://stackoverflow.com/questions/3251609/how-to-get-total-driving-distance-with-google-maps-api-v3 – user672365

Odpowiedz

49

Choć nie wydaje się być udokumentowane oficjalnie, wygląda na to można przemierzać odpowiedzi od sposobu DirectionsService.route(): response.trips[0].routes[0].distance.value, jak w poniższym przykładzie:

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

Screenshot odległości Wyświetlanie i czas trwania: Google Maps API v3 Directions Demo

+0

To nie jest pracuję dla mnie. Wystąpił błąd "response.trips not defined". Aktualizacja. Odpowiedź - response.trips [i] .routes [0] .duration.value powinna wynosić response.routes [i] .legs [0] .duration.value. – Malx

+0

@Malx: Dzięki za poprawkę. Zaktualizowałem odpowiedź. To dziwne, ponieważ jestem pewien, że testowałem ten przykład, kiedy go opublikowałem. Tak właśnie dostałem zrzut ekranu :) –

+0

To nie jest dziwne - API zostało zmienione. Znalazłem odpowiedź w grupach google. – Malx

2

Wybrana odpowiedź działa poprawnie, jeśli trasa ma tylko jeden punkt orientacyjny. Oto, jak uzyskać pełną długość, jeśli masz wiele punktów nawigacyjnych:

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); 
Powiązane problemy