Javascript 如何通过单选按钮而不是下拉按钮在谷歌地图中选择模式？

我目前有一个应用程序，它在当前位置和设置的目的地之间路由用户。用户可以使用下拉选择在两种行驶模式（驾驶/公交）之间切换

我想将用户选择旅行模式的方式从下拉菜单改为单选按钮。然而，我不确定如何修改我的javascript&我一直在寻找这样做的方法，但运气不佳

单选按钮和现有（工作）选择下拉列表的HTML:

<div class="switch">

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

<input name="radio" type="radio" value="TRANSIT" id="optiontwo">
<label for="changemode-train" class="right">Train</label>

<span aria-hidden="true"></span>

</div>


//BELOW IS CURRENT METHOD OF HOW USER CHANGES TRAVEL MODE
<div id="floating-panel">
<b>Mode of Travel: </b>
<select id="mode">
<option value="DRIVING">Driving</option>
<option value="TRANSIT">Transit</option>
</select>
</div>

<script> 
  function initMap() {
    var directionsDisplay = new google.maps.DirectionsRenderer;
    var directionsService = new google.maps.DirectionsService;

    var lattp = <?php echo json_encode($lattp);?>;
    var lngtp = <?php echo json_encode($lngtp);?>;
    var zoomtp = <?php echo json_encode($zoomtp);?>;
    var tp = {lat: JSON.parse(lattp), lng: JSON.parse(lngtp)};

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 14,
      center: tp
    });
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById('right-panel'));

     if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
     document.getElementById('mode').addEventListener('change', function() {
      calculateAndDisplayRoute(directionsService, directionsDisplay, pos);
    });
      calculateAndDisplayRoute(directionsService, directionsDisplay, pos);

    }, function() {
      handleLocationError(true, markerme);
    });
 } else {
  // Browser doesn't support Geolocation
  window.alert('Geolocation is not supported');
 } 
 }

  function calculateAndDisplayRoute(directionsService, directionsDisplay, pos) {
    var selectedMode = document.getElementById('mode').value;
    directionsService.route({
      origin: pos,  // Haight.
      destination: {lat: 50.796358,lng: -1.063816},  // Ocean Beach.
      // Note that Javascript allows us to access the constant
      // using square brackets and a string value as its
      // "property."
       travelMode: google.maps.TravelMode[selectedMode],
       transitOptions: {
       modes: ['RAIL'],
       arrivalTime: new Date(1489242600000),
       routingPreference: 'FEWER_TRANSFERS'
    },
        unitSystem: google.maps.UnitSystem.IMPERIAL,
         provideRouteAlternatives: true
    }, function(response, status) {

      if (status == 'OK') {
        directionsDisplay.setDirections(response);
      } else {
        window.alert('Directions request failed due to ' + status);
      }
    });
  }

驱动
训练
//下面是用户如何更改旅行模式的当前方法
旅行方式：
驱动
换乘

Javascript:

<div class="switch">

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

<input name="radio" type="radio" value="TRANSIT" id="optiontwo">
<label for="changemode-train" class="right">Train</label>

<span aria-hidden="true"></span>

</div>


//BELOW IS CURRENT METHOD OF HOW USER CHANGES TRAVEL MODE
<div id="floating-panel">
<b>Mode of Travel: </b>
<select id="mode">
<option value="DRIVING">Driving</option>
<option value="TRANSIT">Transit</option>
</select>
</div>

<script> 
  function initMap() {
    var directionsDisplay = new google.maps.DirectionsRenderer;
    var directionsService = new google.maps.DirectionsService;

    var lattp = <?php echo json_encode($lattp);?>;
    var lngtp = <?php echo json_encode($lngtp);?>;
    var zoomtp = <?php echo json_encode($zoomtp);?>;
    var tp = {lat: JSON.parse(lattp), lng: JSON.parse(lngtp)};

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 14,
      center: tp
    });
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById('right-panel'));

     if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
     document.getElementById('mode').addEventListener('change', function() {
      calculateAndDisplayRoute(directionsService, directionsDisplay, pos);
    });
      calculateAndDisplayRoute(directionsService, directionsDisplay, pos);

    }, function() {
      handleLocationError(true, markerme);
    });
 } else {
  // Browser doesn't support Geolocation
  window.alert('Geolocation is not supported');
 } 
 }

  function calculateAndDisplayRoute(directionsService, directionsDisplay, pos) {
    var selectedMode = document.getElementById('mode').value;
    directionsService.route({
      origin: pos,  // Haight.
      destination: {lat: 50.796358,lng: -1.063816},  // Ocean Beach.
      // Note that Javascript allows us to access the constant
      // using square brackets and a string value as its
      // "property."
       travelMode: google.maps.TravelMode[selectedMode],
       transitOptions: {
       modes: ['RAIL'],
       arrivalTime: new Date(1489242600000),
       routingPreference: 'FEWER_TRANSFERS'
    },
        unitSystem: google.maps.UnitSystem.IMPERIAL,
         provideRouteAlternatives: true
    }, function(response, status) {

      if (status == 'OK') {
        directionsDisplay.setDirections(response);
      } else {
        window.alert('Directions request failed due to ' + status);
      }
    });
  }

函数initMap（）{
var directionsDisplay=新建google.maps.DirectionsRenderer；
var directionsService=新的google.maps.directionsService；
var-lattp=；
var lngtp=；
var zoomtp=；
var-tp={lat:JSON.parse（lattp），lng:JSON.parse（lngtp）}；
var map=new google.maps.map（document.getElementById（'map'）{
缩放：14，
中心：tp
});
方向显示.setMap（地图）；
directionsDisplay.setPanel（document.getElementById（'right-panel'）；
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（函数（位置）{
var pos={
纬度：位置坐标纬度，
lng:position.coords.longitude
};
document.getElementById（'mode'）。addEventListener（'change'，function（）{
计算显示路线（方向服务、方向显示、pos）；
});
计算显示路线（方向服务、方向显示、pos）；
}，函数（）{
handleLocationError（正确，markerme）；
});
}否则{
//浏览器不支持地理位置
window.alert（'不支持地理位置'）；
} 
}
功能计算和显示路线（方向服务、方向显示、pos）{
var selectedMode=document.getElementById（'mode'）。值；
方向服务.路线({
来源：pos，//Haight。
目的地：{lat:50.796358，液化天然气：-1.063816}，//海洋海滩。
//注意，Javascript允许我们访问常量
//使用方括号和字符串值作为
//“财产。”
travelMode:google.maps.travelMode[selectedMode]，
过渡：{
模式：[“轨道”]，
到达时间：新日期（1489242600000），
路由首选项：“更少的传送”
},
unitSystem:google.maps.unitSystem.IMPERIAL，
ProviderRouteAlternatives:true
}，功能（响应、状态）{
如果（状态=‘正常’）{
方向显示。设置方向（响应）；
}否则{
window.alert（'由于'+状态，指示请求失败）；
}
});
}

---

试试这段代码。有一种方法可以将听众分配到收音机：

document.getElementsByName('radio').forEach(function(el){
el.addEventListener('click', function() {
      alert($(this).val())
    });

})

以及如何获得价值的方法：

var selectedMode = "";
    var radios = document.getElementsByName('radio')
    radios.forEach(function(element) {
        if(element.checked){
            selectedMode = element.value;
        }
    })

请注意，如果您使用jQuery，它可能会更简单： 无论如何，工作代码是这样的

<script> 
  function initMap() {
    var directionsDisplay = new google.maps.DirectionsRenderer;
    var directionsService = new google.maps.DirectionsService;

    var lattp = <?php echo json_encode($lattp);?>;
    var lngtp = <?php echo json_encode($lngtp);?>;
    var zoomtp = <?php echo json_encode($zoomtp);?>;
    var tp = {lat: JSON.parse(lattp), lng: JSON.parse(lngtp)};

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 14,
      center: tp
    });
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById('right-panel'));

     if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };

      document.getElementsByName('radio').forEach(function(el){
        el.addEventListener('click', function() {
            calculateAndDisplayRoute(directionsService, directionsDisplay, pos);
        });

    })

      calculateAndDisplayRoute(directionsService, directionsDisplay, pos);

    }, function() {
      handleLocationError(true, markerme);
    });
 } else {
  // Browser doesn't support Geolocation
  window.alert('Geolocation is not supported');
 } 
 }

  function calculateAndDisplayRoute(directionsService, directionsDisplay, pos) {
    //var selectedMode = document.getElementById('mode').value;
    var selectedMode = "";
    var radios = document.getElementsByName('radio')
    radios.forEach(function(element) {
        if(element.checked){
            selectedMode = element.value;
        }
    })

    directionsService.route({
      origin: pos,  // Haight.
      destination: {lat: 50.796358,lng: -1.063816},  // Ocean Beach.
      // Note that Javascript allows us to access the constant
      // using square brackets and a string value as its
      // "property."
       travelMode: google.maps.TravelMode[selectedMode],
       transitOptions: {
       modes: ['RAIL'],
       arrivalTime: new Date(1489242600000),
       routingPreference: 'FEWER_TRANSFERS'
    },
        unitSystem: google.maps.UnitSystem.IMPERIAL,
         provideRouteAlternatives: true
    }, function(response, status) {

      if (status == 'OK') {
        directionsDisplay.setDirections(response);
      } else {
        window.alert('Directions request failed due to ' + status);
      }
    });
  }

函数initMap（）{
var directionsDisplay=新建google.maps.DirectionsRenderer；
var directionsService=新的google.maps.directionsService；
var-lattp=；
var lngtp=；
var zoomtp=；
var-tp={lat:JSON.parse（lattp），lng:JSON.parse（lngtp）}；
var map=new google.maps.map（document.getElementById（'map'）{
缩放：14，
中心：tp
});
方向显示.setMap（地图）；
directionsDisplay.setPanel（document.getElementById（'right-panel'）；
if（导航器.地理位置）{
navigator.geolocation.getCurrentPosition（函数（位置）{
var pos={
纬度：位置坐标纬度，
lng:position.coords.longitude
};
document.getElementsByName（'radio'）.forEach（函数（el）{
el.addEventListener（'click'，函数（）{
计算显示路线（方向服务、方向显示、pos）；
});
})
计算显示路线（方向服务、方向显示、pos）；
}，函数（）{
handleLocationError（正确，markerme）；
});
}否则{
//浏览器不支持地理位置
window.alert（'不支持地理位置'）；
} 
}
功能计算和显示路线（方向服务、方向显示、pos）{
//var selectedMode=document.getElementById（'mode'）。值；
var selectedMode=“”；
var radios=document.getElementsByName（'radio'））
无线电.forEach（功能（元素）{
如果（元素已选中）{
selectedMode=element.value；
}
})
方向服务.路线({
来源：pos，//Haight。
目的地：{lat:50.796358，液化天然气：-1.063816}，//海洋海滩。
//注意，Javascript允许我们访问常量
//使用方括号和字符串值作为
//“财产。”
travelMode:google.maps.travelMode[selectedMode]，
过渡：{
模式：[“轨道”]，
到达时间：新日期（1489242600000），
路由首选项：“更少的传送”
},
unitSystem:google.maps.unitSystem.IMPERIAL，
ProviderRouteAlternatives:true
}，功能（响应、状态）{
如果（状态=‘正常’）{
方向显示。设置方向（响应）；
}否则{
window.alert（'由于'+状态，指示请求失败）；
}
});
}

Legend！非常感谢：）