Google Maps API定向服务：显示所选路线的距离

Question

我有一个下拉菜单，用于显示我所有的目的地路线。当选择一条路线时，我想在＃浮动面板距离中显示该路线的距离。我是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

你甲肝e未将输出设置为显示范围。 请按以下步骤使用它：

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

注： 这里我只用一条路线。如果要显示多条路线上的距离，则可以使用多条路线。