如何通过无线电按钮而不是下拉列表中的Google Map中选择模式

Question

i当前有一个应用程序，该应用程序将用户路由当前位置和设置目标之间。用户可以在2个旅行模式（驾驶/运输）之间交替 - 使用下拉选择。

我想更改用户如何选择从下拉列表到无线电按钮的旅行模式。但是，不确定如何更改我的JavaScript＆amp;我已经在没有运气的情况下寻找了一种方法。

html用于无线电按钮＆amp;现有（工作）选择下拉：

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

JavaScript：

<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);
      }
    });
  }

Answer 1

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

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);
      }
    });
  }