Comment sélectionner le mode dans la carte Google via des boutons radio au lieu de dropdown?

Question

J'ai actuellement une application qui achemine l'utilisateur entre l'emplacement actuel et une destination définie. L'utilisateur peut alterner entre 2 modes de déplacement (conduite/transit) - en utilisant une sélection déroulante.

Je veux changer la façon dont l'utilisateur sélectionne le mode de déplacement d'une liste déroulante à des boutons radio à la place. Cependant, pas sûr de la façon dont je peux modifier mon javascript & J'ai cherché un moyen de le faire sans succès.

HTML pour les boutons radio & existants (travail) déroulantes, sélectionnez:

<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

Essayez ce code. Il existe un moyen d'assigner un auditoire à la radio:

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

}) 

Et une façon comment obtenir la valeur:

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

S'il vous plaît noter que si vous utilisez jQuery, il pourrait être plus simple: Quoi qu'il en soit, il le code de travail est comme ceci;

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