根据谷歌地图在 Map 中使用谷歌 API v3 显示距离、持续时间

Question

在我的项目中，我需要显示与谷歌地图相同的 map。 就像2个位置的距离，路线，持续时间等。使用google API，我可以获得两个位置的位置和路线的距离和持续时间。 我附上了到目前为止我使用 Google API 取得的成果的屏幕截图。 我得到了持续时间和距离，我在 map 下方的文本框中显示了它。

目前进展：

但现在我想在 Map 上显示与 Google 地图相同的距离和持续时间。

目标：

与谷歌地图类似，如果目的地位置有另一条路线，则需要在 map 上显示。

这是我的 JavaScript 完整代码。

测试.html

<div id="map"></div>

<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap&libraries=&v=weekly"async></script>

<script>
function initMap() {
const map = new google.maps.Map(
  document.getElementById("map"), {
    zoom: 17.56,
    center: new google.maps.LatLng(40.82286053690113, -74.47670838043277), 
  });
  $(function () {
    $("#padcLocation").change(function () {
      let LocLongi,Loclati;
      let padcLoc = document.getElementById('padcLocation').value;
      if (padcLoc.includes('Clifton')) {
        Loclati = 40.84989924159685; 
        LocLongi = -74.15287810187937;
      }
      else {
        Loclati = 40.82286053690113;
        LocLongi = -74.47670838043277
      }
      const map = new google.maps.Map(
        document.getElementById("map"), {
        zoom: 17.56,
        center: new google.maps.LatLng(Loclati, LocLongi), 
      });
    });
  });
  $(function () {
    $("#patient_city").change(function () {
      let padcLoc = document.getElementById('padcLocation').value;
      let FinalAddress = document.getElementById('destinationAddress').value;
      var directionsService = new google.maps.DirectionsService();
      var directionsRenderer = new google.maps.DirectionsRenderer();
      if (padcLoc == 'Clifton') {
        Loclati = 40.84989924159685; 
        LocLongi = -74.15287810187937;
      }
      else {
        Loclati = 40.82286053690113;
        LocLongi = -74.47670838043277
      }

      let geocoder = new google.maps.Geocoder;
      geocoder.geocode( { 'address': FinalAddress}, function(results, status) {
        
        if (status == google.maps.GeocoderStatus.OK) {
          let Lati = results[0].geometry.location.lat();
          let Longi = results[0].geometry.location.lng();
          latitude.value = Lati;
          longitude.value = Longi;

          const map = new google.maps.Map(
          document.getElementById("map"), {
            zoom: 17.56,
            center: new google.maps.LatLng(Lati, Longi), 
          });
          directionsRenderer.setMap(map);
        } 
        else {
          console.log("failed: status="+status);
        }
      });

      let service = new google.maps.DistanceMatrixService();
      service.getDistanceMatrix(
        {
            origins: [padcLoc],
            destinations: [FinalAddress],
            travelMode: google.maps.TravelMode.DRIVING,
            unitSystem: google.maps.UnitSystem.IMPERIAL, // miles and feet.
            avoidHighways: false,
            avoidTolls: false
        }, Mapcallback);

        var request = {
          origin: padcLoc,
          destination: FinalAddress,
          travelMode: google.maps.TravelMode['DRIVING']
        };
        directionsService.route(request, function(response, status) {
          if (status == 'OK') {
            directionsRenderer.setDirections(response);
          }
        });
      });
    });
 }

 function Mapcallback(response, status) {
      if (status != google.maps.DistanceMatrixStatus.OK) {
         alert("Error");
      } else {
          var origin = response.originAddresses[0];
          var destination = response.destinationAddresses[0];
          if (response.rows[0].elements[0].status === "OK") {
              var distance = response.rows[0].elements[0].distance;
              var duration = response.rows[0].elements[0].duration;
              var distance_in_kilo = distance.value / 1000; // the kilom
              var distance_in_mile = distance.value / 1609.34; // the mile
              var duration_text = duration.text;
              var duration_value = duration.value;
              document.getElementById('mapDuration').value = duration_text;
              document.getElementById('mapDistance').value = distance.text;
              let dtl = duration_text.split(' ')
              if (duration_text.includes('hours')){
                if (parseInt(dtl[0]) > 1){
                  alert("Sorry, Duration must be less than 2 hours but your's is " + duration_text + " far");
                }
              }else {
                alert("Great, Your duration is "+ duration_text)
              }
            }
            else{
              alert("Better get on a plane. There are no roads between " + origin + " and " + destination); 
          }
      }
  }
</script>

笔记：

1. 在代码中，默认 map 显示为 static Lati, Longi。
2. 选择源位置（padcLoc）后，map 将根据新的 Lati、Longi 进行更改。
3. 选择目的地和位置（最终地址）后，map 将随着两个位置之间的路线而变化，如第一个屏幕截图所示。
4. 现在我想根据谷歌地图显示生成的 map 的距离和持续时间（如第二张截图所示）。