如何在我的 javascript 中获得以 KM 为单位的总距离答案

【问题标题】：How can i get the total distance in KM in my javascript如何在我的 javascript 中获得以 KM 为单位的总距离
【发布时间】：2015-10-19 05:35:43
【问题描述】：

如何在我的 javascript 中获得以公里为单位的总距离。它已经显示在面板的顶部，但我的 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 函数是不够的。

有人可以帮我解决这个问题吗？

谢谢！

塞尔吉奥

【问题讨论】：

标签： javascript google-maps google-maps-api-3 getdistance

【解决方案1】：

距离在每个route legs都可用

google.maps.Distance 对象规范距离表示为数值和显示字符串。属性类型描述文本字符串距离值的字符串表示形式，使用请求中指定的 UnitSystem。 value number 以米为单位的距离。

proof of concept fiddle

代码 sn-p：

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>

【讨论】：

【解决方案2】：

根据documentation：

单位系统

输入：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，即使原产国使用英制。

【讨论】：

【解决方案3】：

您可以通过以下方式轻松获得距离：

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

例如，结果将是“20,5 km”之类的文本。

【讨论】：

【解决方案4】：

在您的请求中，设置units=metric。

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

【讨论】：