时间戳

首页 > 解决方案 > 如何让方向文本面板检测出行方式？

google-maps-api-3 - 如何让方向文本面板检测出行方式？

问题描述

所以我正在使用 Google Map API 开发方向服务。该网站与自动完成服务配合良好，我正在尝试添加文本面板，告诉用户如何使用“过境”、“步行”和“驾驶”模式到达目的地。

https://jsfiddle.net/QPX321/yo4tbh58/

要做的是让文本根据用户选择的出行方式提供路线信息。说如果我选择“过境”，它会告诉我我必须乘坐的公共汽车。

所以我知道下面函数中的代码有问题。

function calculateAndDisplayRoute(directionsService, 
directionsDisplay) {
    var start = document.getElementById('origin-input').value;
    var end = document.getElementById('destination-input').value;
      var modeSelector = document.getElementById('mode-selector');

    directionsService.route({
      origin: start,
      destination: end,
      travelMode: modeSelector,
    }, function(response, status) {
      if (status === 'OK') {
        directionsDisplay.setDirections(response);
      } else {
        window.alert('Directions request failed due to ' + status);
      }
    });
  }

当我更改时，代码工作正常

travelMode: modeSelector,

至

travelMode: 'WALKING', or
travelMode: 'DRIVING',  or 
travelMode: 'DRIVING',

但这只会提供一种选择，它会强制将我的旅行模式更改为一种特定模式。我应该如何对其进行编码，以便文本面板能够检测到我的出行模式，从而给我适当的建议？</p>

我认为问题是我没有将我的旅行模式与该功能相关联？我使用下面的代码来设置我的旅行模式，

var modeSelector = document.getElementById('mode-selector');

并认为下面的代码将能够检测到我的旅行模式

travelMode: modeSelector,

但是当我使用这些代码时它不起作用。

我希望文本面板在我单击的旅行模式下显示方向。如果我单击驾驶模式，它应该会告诉我如何从 A 点开车到 B 点。除非我将 travelMode: 更改为特定模式（“驾驶”、“公交”或'步行'）。

提前感谢您的帮助和宝贵的时间。

问候，

标签： google-maps-api-3

解决方案

首先，您需要将值属性添加到 HTML 中的单选输入标签：

<input type="radio" name="type" id="changemode-walking" checked="checked" value='WALKING'>
<label for="changemode-walking">Walking</label>

<input type="radio" name="type" id="changemode-transit" value='TRANSIT'>
<label for="changemode-transit">Transit</label>

<input type="radio" name="type" id="changemode-driving" value='DRIVING'>
<label for="changemode-driving">Driving</label>

然后，您需要检查检查了哪些无线电输入并获取它的值。您可以在 for 循环中执行此操作（根据此答案）：

var radios = document.getElementsByName('type');

for (var i = 0; i < radios.length; i++) {
  if (radios[i].checked) {
    var modeSelector = radios[i].value;
    break;
  }
}

现在 modeSelector 包含来自选中单选按钮的 value 属性的文本。

这是您的 JSfiddle 工作版本的链接。

推荐阅读