Question

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

我想改变用户选择旅行模式的方式，从下拉列表到单选按钮。但是，不确定如何改变我的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

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

 CButton checkbox;
 CString str = "Cropped Value Of CheckBox";
 checkbox.create(str,WS_CHILD | WS_VISIBLE | WS_TABSTOP | BS_AUTOCHECKBOX, CRect(0,0,0,0), this, CHECK_ID);

如何获得价值的方法：

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

})

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

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

如何通过单选按钮而不是下拉列表在Google地图中选择模式？

1 个答案: