如何在JavaScript中獲取以KM為單位的總距離

Question

如何在JavaScript中獲取以KM為單位的總距離。 它已經顯示在面板頂部，但是我的JavaScript也需要此值。 我的JavaScript如下：

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

 var map = new google.maps.Map(document.getElementById('map'), {
   zoom:7,
   mapTypeId: google.maps.MapTypeId.ROADMAP
 });

 directionsDisplay.setMap(map);
 directionsDisplay.setPanel(document.getElementById('panel'));


 var een = '52.3641205';
 var twee = '4.905697000000032';
 var drie = '52.6010666';
 var vier =  '4.73768229999996';

 var p1 = new google.maps.LatLng(een, twee);
 var p2 = new google.maps.LatLng(drie, vier);

 var request = {
   origin: p1, 
   destination: p2,
   travelMode: google.maps.DirectionsTravelMode.DRIVING
 };

 directionsService.route(request, function(response, status) {
   if (status == google.maps.DirectionsStatus.OK) {

     alert('Total travel distance is:' + response);

     directionsDisplay.setDirections(response);

   }
 }); 

該功能正在運行，但我也想提醒總距離。 這可以在面板頂部看到。 將來該面板將不可見，因此getelementbyID函數還不夠。

有人可以幫我弄這個嗎？

謝謝！

塞爾吉奧

Answer 1

根據文檔 ：

unitSystem

類型： 單位系統

顯示距離時要使用的首選單位系統。 默認為原產國使用的單位制。

因此，如果您想將其強制為METRIC：

var request = {
    origin: p1,
    destination: p2,
    travelMode: google.maps.DirectionsTravelMode.DRIVING,
    unitSystem: google.maps.UnitSystem.METRIC
};

這將強制response.routes[0].legs[0].distance.text的值使用公制。

而且，正如@geocodezip答案中所述，您也可以依賴response.routes[0].legs[0].distance.value ，該值始終以米為單位返回，即使原籍國使用英制也是如此。

Answer 2

的距離可在每一個的路徑 的腿

google.maps.Distance object specification
A representation of distance as a numeric value and a display string.

Properties  Type    Description
text    string  A string representation of the distance value, using the UnitSystem specified in the request.
value   number  The distance in meters.

概念證明

代碼段：

 var geocoder; var map; function initialize() { var directionsService = new google.maps.DirectionsService(); var directionsDisplay = new google.maps.DirectionsRenderer(); map = new google.maps.Map(document.getElementById('map'), { zoom: 7, mapTypeId: google.maps.MapTypeId.ROADMAP }); directionsDisplay.setMap(map); directionsDisplay.setPanel(document.getElementById('panel')); var een = '52.3641205'; var twee = '4.905697000000032'; var drie = '52.6010666'; var vier = '4.73768229999996'; var p1 = new google.maps.LatLng(een, twee); var p2 = new google.maps.LatLng(drie, vier); var request = { origin: p1, destination: p2, travelMode: google.maps.DirectionsTravelMode.DRIVING }; directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { document.getElementById('distance').innerHTML = 'Total travel distance is: ' + (response.routes[0].legs[0].distance.value / 1000).toFixed(2) + " km"; alert('Total travel distance is: ' + (response.routes[0].legs[0].distance.value / 1000).toFixed(2) + ' km'); directionsDisplay.setDirections(response); } }); } google.maps.event.addDomListener(window, "load", initialize); 

 html, body, #map { height: 100%; width: 100%; margin: 0px; padding: 0px } 

 <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="distance"></div> <div id="map" style="border: 2px solid #3872ac;"></div> <div id="panel"></div> 

Answer 3

您可以通過以下方式輕松獲得距離：

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

例如，結果將是“ 20.5 km”之類的文本。

Answer 4

在您的請求中，設置units=metric 。

然后使用： distance = response.routes[0].legs[0].distance.text; 在您的警報中。