如何通过单选按钮而不是下拉菜单在 Google 地图中使用 select 模式？

Question

我目前有一个应用程序可以在当前位置和设定的目的地之间引导用户。用户可以在 2 种出行模式之间切换 (driving/transit) - 使用下拉菜单 selection.

我想将用户 select 出行模式从下拉列表更改为单选按钮。但是，不确定如何更改我的 javascript 并且我一直在寻找一种方法，但没有成功。

HTML 用于单选按钮和现有（有效）select 下拉列表：

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

如何通过单选按钮而不是下拉菜单在 Google 地图中使用 select 模式？

How to select mode in Google map via radio buttons instead of dropdown?

javascript

google-maps

google-api-javascript-client