将距离矩阵添加到谷歌方向答案

【问题标题】：Adding distance matrix to google direction将距离矩阵添加到谷歌方向
【发布时间】：2012-03-09 04:26:02
【问题描述】：

帮我用谷歌方向包括距离矩阵

在我的网站上，我使用以下代码获取 Google 地图。我应该添加什么代码来显示往返之间的距离以及旅行时间？

谢谢。

<div style="width: 298px;">
 <div id="map" style="width: 298px; height: 400px; float: left;"></div>

 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 request = {
   origin: '<?php echo $contents['pickupname']; ?>', 
   destination: '<?php echo $contents['dropoffname']; ?>',
   travelMode: google.maps.DirectionsTravelMode.DRIVING
 };

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

 });

【问题讨论】：

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

【解决方案1】：

进行此更改：

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

 var myRoute = response.routes[0].legs[0];
 var duration = myRoute.duration.value;
 var distance = myRoute.distance.value;   
});

另请注意，此代码仅用于演示。您需要修改代码以检查有多条路线、多条腿的情况。有关详细信息，请参阅DirectionsResult、DirectionsRoute、DirectionsLeg

【讨论】：

【解决方案2】：

这是我正在使用的解决方案：

首先添加将在 HTML 中显示您的数据的元素。我正在使用这样的输入元素：

<input type="text" name="distance" id="distance" readonly="true" />

当您在 JS 中进行计算时，将该数据发送到输入。例如：

var distanceInput = document.getElementById('distance');
distanceInput.value = response.routes[0].legs[0].distance.value / 1000;

【讨论】：