Question

因此，我正在使用Google Map API开发方向服务。该网站可以使用自动完成服务正常运行，我正在尝试添加文本面板，告诉用户如何使用“公交”，“步行”和“驾驶”模式到达目的地。

要做的是让文本根据用户选择的出行模式提供路线信息。说如果我选择“公交”，它将向我显示我必须乘坐的公交车。

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

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',

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

我认为问题是我没有将旅行模式链接到该功能？我使用下面的代码来设置我的旅行模式

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

，并认为下面的代码将能够检测我的出行方式

travelMode: modeSelector,

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

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

在此先感谢您的帮助和宝贵的时间。

此致

Answer 1

首先，您需要在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循环中执行此操作（按照this answer）：

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属性中的文本。

Here是指向JSfiddle工作版本的链接。

如何使方向文本面板检测行驶模式？

1 个答案: