如何通過單選按鈕而不是下拉菜單選擇Google地圖中的模式？

Question

我目前有一個應用程序，在當前位置和設定的目的地之間路由用戶。用戶可以在兩種旅行模式（駕駛/轉乘）之間切換 - 使用下拉選項。

我想改變用戶如何從下拉選擇單選按鈕來選擇旅行模式。然而，我不確定如何改變我的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> 

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