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

Question

我有一个下拉列表，用于显示我的所有目的地路线。当选择一条路线时，我想在我的＃floating-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;

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