Distancia de direcciones en Google Maps API v3

Estoy tratando de averiguar cómo usar el Google Maps Directions Demo para obtener la distancia de las direcciones exitosas.Distancia de direcciones en Google Maps API v3

Este es el código que tengo hasta ahora:

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

que podía hacer esto muy bien en la versión 2, sólo tener problemas para la elaboración de la v3 equivalente.

Fuente

2010-03-18 Yawn

Bienvenido a desbordamiento de pila ... Esta es una pregunta interesante, ya que no parece estar documentado en ninguna parte en la Referencia de API v3. –

También puede ver la siguiente respuesta en stackoverflow http://stackoverflow.com/questions/3251609/how-to-get-total-driving-distance-with-google-maps-api-v3 – user672365

Si bien no parece ser documentados oficialmente, parece que se puede recorrer la respuesta del DirectionsService.route() método: response.trips[0].routes[0].distance.value, como en el siguiente ejemplo:

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

Captura de pantalla que muestra la distancia y la duración: Google Maps API v3 Directions Demo

Fuente

2010-03-18 19:14:05

No es trabajando para mi Recibí un error "response.trips no definido". Upd. la respuesta - response.trips [i] .routes [0] .duration.value debe ser response.routes [i] .legs [0] .duration.value. – Malx

@Malx: Gracias por la corrección. Actualicé la respuesta. Esto es extraño, porque estoy seguro de que probé ese ejemplo cuando lo publiqué. De hecho, así es como obtuve la captura de pantalla :) –

No es extraño: la API se modificó. Encontré la respuesta en grupos de google. – Malx

La respuesta elegida funciona correctamente si la ruta tiene solo un waypoint. Así es como para obtener la longitud completa si tiene varios puntos de interés:

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

Fuente

2015-04-27 17:21:50

Distancia de direcciones en Google Maps API v3

Respuesta

Cuestiones relacionadas