Wie erhält man die Gesamtdistanz mit Google Maps API V3?

ich verwendet, um es so zu erhalten:Wie erhält man die Gesamtdistanz mit Google Maps API V3?

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

Aber es sieht aus wie sie their API auf mich verändert! Sieht aus wie trips ist nicht mehr da, und routes gibt Ihnen nur eine Reihe von Beinen ... muss ich wirklich über alle Beine iterieren und die Entfernung jetzt zusammenfassen?

Quelle

2010-07-15 mpen

Per Leniel's answer:

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

Eigentlich funktioniert dies nur zu gut, wenn Sie Wegpunkte nicht haben:

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

Hier ist ein vollständigeres Beispiel mit lodash . Sollte nicht zu schwer zu ersetzen flatBy und sum, wenn Sie es nicht verwenden.

/** 
* 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)); 
      } 
     }); 
    }); 
}

Denken Sie daran, die Google Maps API enthalten:

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

Auch ich bin mir ziemlich sicher, dass ihre ToS Sie benötigen auch eine Google Map angezeigt werden soll.

Quelle

2010-07-15 00:44:10 mpen

einen Blick hier nehmen:

The Directions Results Object

Es sieht aus wie Sie jetzt jedes Bein Abstand zu summieren haben.

Beine [] enthält ein Array von DirectionsLeg Objekten, von denen jedes Informationen über ein Bein enthält die Route, von zwei Orten innerhalb die vorgegebene Route. Eine separate Strecke wird für jeden Wegpunkt oder Ziel angegeben werden. (Eine Route mit keine Wegpunkte wird genau eine DirectionsLeg enthalten.) Jede Etappe besteht aus einer Reihe von DirectionSteps.

Quelle

2010-07-15 00:34:24

Also ... genau das, was ich gesagt habe! Obwohl ich falsch darüber informiert wurde, was ein "Bein" war. Dachte, es war was sie einen "Schritt" nennen. Iterieren über 1 Bein ist dann nicht so schlimm. – mpen

Marks Antwort ist in Meter für totalDistance und Sekunden für totalDuration.

Wenn Sie in den USA sindund wollen Meilen mit einer einzigen Dezimalpunkt, multiplizieren wie so:

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

Und wenn Sie wollen Minuten:

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

Quelle

2011-11-30 22:09:01 cacheflowe

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

Quelle

2013-06-13 04:53:55

Sie können leicht erhalten, indem mit:

Entfernung durch den Einsatz :

Du Ration mit:

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

Quelle

2015-04-25 09:05:53 Reeves

Nur wenn Sie 1 Bein haben. Von Punkt A nach B. Für mehrere Strecken müssen Sie die Streckenwerte summieren, wie in der obigen Antwort von @mpen, und Meter von distance.value und seconds of duration.value konvertieren –

Wie erhält man die Gesamtdistanz mit Google Maps API V3?

Antwort

Verwandte Themen