Google Maps API Direction Service：選択したルートの距離を表示

Question

私はすべての目的地ルートを表示するためのドロップダウンを持っています。 1つのルートが選択されると、そのルートの距離を#Flow-Panel-Distanceに表示したいと思います。私はJavaScriptが初めてで、これをどうやって行うのかはほとんど分かりません。誰かが私に手を差し伸べてもらえますか？ありがとう。

は、ここに私のJavaScriptのだ：

function initMap() { 
    var directionsService = new google.maps.DirectionsService; 
    var directionsDisplay = new google.maps.DirectionsRenderer; 
    var map = new google.maps.Map(document.getElementById('directionsMap'), { 
    zoom: 16, 
    center: { lat: 1.2836, lng: 103.8604 } 
    }); 

    directionsDisplay.setMap(map); 

    var onChangeHandler = function() { 
    calculateAndDisplayRoute(directionsService, directionsDisplay); 
    var disableOption = document.getElementById('disableOption'); 
    disableOption.setAttribute('disabled', true); 
    }; 

    document.getElementById('end').addEventListener('change', onChangeHandler); 
} 

function calculateAndDisplayRoute(directionsService, directionsDisplay) { 
    directionsService.route({ 
    origin: { lat: 1.2836, lng: 103.8604 }, 
    destination: document.getElementById('end').value, 
    travelMode: 'DRIVING' 
    }, function (response, status) { 
    if (status === 'OK') { 
     directionsDisplay.setDirections(response); 
    } else { 
     window.alert('Directions request failed due to ' + status); 
    } 
    }); 
} 

は、ここに私のHTMLです：

<div class="directions-map-overlay"> 

    <div id="directionsMap"> 
    </div> 
    <div id="floating-panel"> 
    <b>Nearby attractions: </b> 
    <select id="end"> 
     <option value="" id="disableOption">Please select</option> 
     <option value="18 Marina Gardens Dr, Singapore">Gardens by the Bay</option> 
     <option value="Sentosa, Singapore">Sentosa</option> 
     <option value="8 Sentosa Gateway, Singapore">Universal Studios Singapore</option> 
     <option value="80 Mandai Lake Rd, Singapore">Singapore Zoo</option> 
     <option value="1 Cluny Rd, Singapore">Singapore Botanic Gardens</option> 
     <option value=" 
        30 Raffles Ave, Singapore">Singapore Flyer</option> 
     <option value="Merlion, Singapore">Merlion</option> 
     <option value="2 Jurong Hill, Singapore">Jurong Bird Park</option> 
     <option value="E Coast Park Service Rd, Singapore">East Coast Park</option> 
    </select> 
    </div> 
    <div id="floating-panel-distance"> 
    <b>Distance:</b> <span id="distance"></span> 
    </div> 
</div> 

ここに私のCSSです：

.directions-map-overlay { 
    /* Hidden by default */ 
    position: fixed; 
    /* Stay in place */ 
    z-index: 9999; 
    /* Sit on top */ 
    left: 0; 
    top: 0; 
    width: 100%; 
    /* Full width */ 
    height: 100%; 
    /* Full height */ 
    overflow: hidden; 
    /* Enable scroll if needed */ 
    background-color: rgb(0, 0, 0); 
    /* Fallback color */ 
    background-color: rgba(0, 0, 0, 0.9); 
} 

#directionsMap { 
    position: absolute; 
    top: 10%; 
    transform: translateX(-50%); 
    height: 90%; 
    width: 95%; 
    left: 50%; 
} 


#floating-panel { 
    position: absolute; 
    top: 2%; 
    left: 5%; 
    z-index: 5; 
    background-color: #fff; 
    padding: 5px; 
    border: 1px solid #999; 
    text-align: center; 
    font-family: 'Roboto','sans-serif'; 
    line-height: 30px; 
    padding-left: 10px; 
} 

#floating-panel-distance { 
    position: absolute; 
    top: 2%; 
    right: 20%; 
    /* height:50px; */ 
    width: 200px; 
    z-index: 5; 
    background-color: #fff; 
    padding: 5px; 
    border: 1px solid #999; 
    /* text-align: center; */ 
    font-family: 'Roboto','sans-serif'; 
    line-height: 30px; 
    padding-left: 10px; 
} 
#distance { 
    color: #CB242D; 
    font-weight: 500; 
    margin-left: 10px; 
} 

Answer 1

あなたは肝炎出力を表示スパンに設定しない。 次のようにそれを使用してください：

document.getElementById('distance').innerHTML=response.routes[0].legs[0].distance.text; 

注：私は1つのルートのみを使用していた。ここ を。複数のルート間に距離を表示する場合は、複数のルートを使用できます。