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

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

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

因此，我知道下面函数中的代码有问题

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,

到

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

我认为问题在于我没有将我的旅行模式与功能链接？我使用下面的代码设置我的旅行模式

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

我想下面的代码可以检测到我的旅行模式

travelMode: modeSelector,

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

我希望文本面板在我单击的旅行模式中显示方向。如果我单击“驾驶模式”，它会告诉我如何从A点驾驶到B点。除非我将travelMode更改为特定模式（“驾驶”、“交通”或“步行”），否则代码不会给我任何文本

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

---

关于，

首先，您需要在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'）；
对于（变量i=0；i

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

---

是指向您的JSFIDLE工作版本的链接。

嗨，Darren G。谢谢您的回复。我在末尾添加了.value，但它仍然不起作用。在这种情况下不会显示文本，只有当我将travelmode定义为“运输”、“驾驶”或“步行”时，才会显示文本。我注意到的另一件事是，我没有浮动面板，因为它被自动完成方向服务所取代。所以脚本中的第129行（var control=document.getElementById（'floating-panel'）；）可能不起作用。我不确定这是否会影响什么。抱歉，我回答得太快了。我已经更改了答案，并使您的JSFIDLE正常工作。我非常感谢您的帮助，文本显示出来。如何刷新面板？我注意到，如果我更改单选按钮，文本不会更改。例如，如果我键入“to”和“from”，并且模式为“transit”，它将显示如何在transit模式下到达那里。但如果我尝试将其更改为“步行”模式，文本将保持不变，我不会显示如何步行到目的地。我还注意到，即使我将旅行模式更改为其他模式，第一条旅行路线也不会消失。假设我先选择“步行”模式，它会显示步行路线。当我选择“公交”时，我将同时拥有公交和步行路线

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

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

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