recorrida - ¿Cómo obtener la distancia total de manejo con Google Maps API V3?

google maps distancias

Question

Solía ​​poder obtenerlo así:

directionsService.route(directionsRequest, function(directionsResult, directionsStatus) {
    var directionsRenderer = new google.maps.DirectionsRenderer({
        directions: directionsResult,
        map: map
    });
    $(''#distance'').text(directionsResult.trips[0].routes[0].distance.text)
    $(''#duration'').text(directionsResult.trips[0].routes[0].duration.text)
})

¡Pero parece que cambiaron su API en mí! Parece que los trips ya no están allí, y las routes solo te dan un montón de piernas ... ¿De verdad tengo que iterar sobre todas las piernas y resumir la distancia ahora?

Answer 1

Eche un vistazo aquí:

El Objeto Resultados de las Direcciones

Parece que ahora tienes que resumir cada distancia de pierna.

legs [] contiene una matriz de objetos DirectionsLeg, cada uno de los cuales contiene información sobre un tramo de la ruta, desde dos ubicaciones dentro de la ruta determinada. Un tramo separado estará presente para cada punto de referencia o destino especificado. (Una ruta sin waypoints contendrá exactamente un DirectionsLeg). Cada tramo consta de una serie de DirectionSteps.

Answer 2

La respuesta de Mark está en metros para la totalDistance y segundos para la totalDuration .

Si se encuentra en los EE. UU. Y quiere millas con un solo punto decimal, multiplique de esta manera:

var METERS_TO_MILES = 0.000621371192;
$(''#distance'').text((Math.round( totalDistance * METERS_TO_MILES * 10 ) / 10)+'' miles'');

Y si quieres minutos:

$(''#distance'').text(Math.round( totalDuration / 60 )+'' minutes'');

Answer 3

Según la respuesta de Leniel :

var totalDistance = 0;
var totalDuration = 0;
var legs = directionsResult.routes[0].legs;
for(var i=0; i<legs.length; ++i) {
    totalDistance += legs[i].distance.value;
    totalDuration += legs[i].duration.value;
}
$(''#distance'').text(totalDistance);
$(''#duration'').text(totalDuration);

En realidad, esto también funciona bien, si no tienes puntos de referencia:

$(''#distance'').text(directionsResult.routes[0].legs[0].distance.text);
$(''#duration'').text(directionsResult.routes[0].legs[0].duration.text);

Aquí hay un ejemplo más completo usando lodash . No debería ser demasiado difícil reemplazar flatBy y sum si no lo estás usando.

/**
 * Computes the total driving distance between addresses. Result in meters.
 *
 * @param {string[]} addresses Array of address strings. Requires two or more.
 * @returns {Promise} Driving distance in meters
 */
export default function calculateDistance(addresses) {
    return new Promise((resolve, reject) => {
        if(addresses.length < 2) {
            return reject(new Error(`Distance calculation requires at least 2 stops, got ${addresses.length}`));
        }

        const {TravelMode, DirectionsService, DirectionsStatus} = google.maps;

        const directionsService = new DirectionsService;
        const origin = addresses.shift();
        const destination = addresses.pop();
        const waypoints = addresses.map(stop => ({location: stop}));

        directionsService.route({
            origin,
            waypoints,
            destination,
            travelMode: TravelMode.DRIVING,
        }, (response, status) => {
            if(status === DirectionsStatus.OK) {
                let distances = _.flatMap(response.routes, route => _.flatMap(route.legs, leg => leg.distance.value));

                return resolve(_.sum(distances));
            } else {
                return reject(new Error(status));
            }
        });
    });
}

Recuerde incluir la API de Google Maps:

<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places"></script>

Además, estoy bastante seguro de que sus ToS requieren que muestres un mapa de Google también.

Answer 4

puedes obtener fácilmente usando:

Distancia usando:

directionsDisplay.directions.routes[0].legs[0].distance.text

Duración mediante el uso de:

directionsDisplay.directions.routes[0].legs[0].duration.text

Answer 5

<!DOCTYPE html>
<html>
<head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
        html, body, #map-canvas {
            margin: 0;
            padding: 0;
            height: 100%;
        }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>

        var directionsDisplay;
        var directionsService = new google.maps.DirectionsService();
        var map;

        function initialize() {
            directionsDisplay = new google.maps.DirectionsRenderer();
            var chicago = new google.maps.LatLng(26.912417, 75.787288);
            var mapOptions = {
                zoom: 7,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                center: chicago
            }
            map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
            directionsDisplay.setMap(map);

        }

        function calcRoute() {
            var start = document.getElementById("start").value;
            var end = document.getElementById("end").value;


            var waypts = [];
            var checkboxArray = document.getElementById(''waypoints'');
            for(var i = 0; i < checkboxArray.length; i++) {
                if(checkboxArray.options[i].selected == true) {
                    waypts.push({
                        location: checkboxArray[i].value,
                        stopover: true
                    });
                }
            }


            var request = {
                origin: start,
                destination: end,
                waypoints: waypts,
                travelMode: google.maps.TravelMode.DRIVING
            };
            directionsService.route(request, function(response, status) {
                if(status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                    var route = response.routes[0];
                    //  alert(route.legs[1].duration.text);
                    var summaryPanel = document.getElementById(''directions_panel'');
                    summaryPanel.innerHTML = '''';
                    // For each route, display summary information.
                    for(var i = 0; i < route.legs.length; i++) {
                        var routeSegment = i + 1;
                        summaryPanel.innerHTML += ''<b>Route Segment: '' + routeSegment + ''</b><br>'';
                        summaryPanel.innerHTML += route.legs[i].start_address + '' to '';
                        summaryPanel.innerHTML += route.legs[i].end_address + ''<br>'';
                        summaryPanel.innerHTML += route.legs[i].duration.text + ''<br>'';
                        summaryPanel.innerHTML += route.legs[i].distance.text + ''<br><br>'';
                    }

                }
            });
        }

        google.maps.event.addDomListener(window, ''load'', initialize);

    </script>
</head>
<body>
    <!--  <div id="map-canvas"></div>-->
    <div>
        <strong>Start: </strong>
        <select id="start" onChange="calcRoute();">
            <option value="Jaipur">Jaipur</option>
            <option value="jagatpura">jagatpura</option>
            <option value="malviya nagar, Jaipur">Malviya Nagar</option>
            <option value="khatu">Sikar</option>
            <option value="Dausa">Dausa</option>
            <option value="Luniawas">Luniyawas</option>
            <option value="Karoli">Karoli</option>
            <option value="Baran">Baran</option>
            <option value="Sawai Madhopur">Sawai Madhopur</option>
            <option value="Udaipur">Udaipur</option>
            <option value="Bikaner">Bikaner</option>
            <option value="Churu">Churu</option>
        </select>
        <strong>End: </strong>
        <select id="end" onChange="calcRoute();">
            <option value="Jaipur">Jaipur</option>
            <option value="bassi">bassi</option>
            <option value="goner">goner</option>
            <option value="Khaniya">Khaniya</option>
            <option value="Luniawas">Luniyawas</option>
            <option value="Ajmer">Ajmer</option>
            <option value="Karoli">Karoli</option>
            <option value="Baran">Baran</option>
            <option value="Sawai Madhopur">Sawai Madhopur</option>
            <option value="Udaipur">Udaipur</option>
            <option value="Bikaner">Bikaner</option>
            <option value="Churu">Churu</option>
        </select>
    </div>

    <div>
        <strong>Mode of Travel: </strong>
        <select id="mode" onChange="calcRoute();">
            <option value="DRIVING">Driving</option>
            <option value="WALKING">Walking</option>
            <option value="BICYCLING">Bicycling</option>
            <option value="TRANSIT">Transit</option>
        </select>

        <select multiple id="waypoints" onChange="calcRoute();">
            <option value="bassi">bassi</input>
            <option value="chainpura">chainpura</input>
            <option value="Kanauta">Kanauta</input>
        </select>

    </div>

    <div id="map-canvas" style="float:left;width:70%; height:40%"></div>

    <div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div>

</body>
</html>