javascript - 谷歌路线规划模式

Question

说到 javascript，我有点菜鸟。我有一个 Google map 简单脚本，用于从 A 到 B 的路由路线。一切正常，除了我想将模式(驾驶、步行...)从当前下拉选择器更改为单选按钮。

我在网上和 stackoverflow 上搜索过，但目前没有找到可行的解决方案。

我的html:

<select id="mode">
     <option selected="selected" value="DRIVING">Car</option>
     <option value="WALKING">Walk</option>
     <option value="TRANSIT">Public transport</option>
     <option value="BICYCLING">Bike</option>
</select>

和脚本:

function calcRoute() {
var selectedMode = document.getElementById('mode').value;
var start = document.getElementById("routeStart").value;
var end = document.getElementById("routeEnd").value;
var request = {
    origin: start,
    destination: end,
    travelMode: google.maps.TravelMode[selectedMode]
};

是否可以将上面代码中的选择(下拉菜单)更改为单选按钮，或者我还应该发布其他内容吗？

附:我也尝试过this solution ，但是当我提交计算路线时，它只是将我重定向到空白子页面/模式？。

谢谢:)

Answer 1

我希望您谈论的是单选按钮而不是复选框，因为可以选择多个复选框，这将无法按预期工作。单选按钮分为具有相同名称和不同 id 的组，其中一个按钮的 check 属性设置为 true，因此循环遍历它们直到找到它。

创建一个新函数来查找选中的单选按钮，然后替换var selectedMode = document.getElementById('mode').value;代码如下:

function getCheckedRadio(radio_group) {
    for (var i = 0; i < radio_group.length; i++) {
        var button = radio_group[i];
        if (button.checked) {
            return button;
        }
    }
    return undefined;
}

var selectedMode = getCheckedRadio(document.forms.frmId.elements.groupName).value;