整合谷歌距离Matrix api

Question

我有这段代码，但需要将googles距离矩阵api集成到其中。我很困惑如何做到这一点，因为我在第一次写出代码时没有这样做。 我应该获取您当前的位置以及手册lat和＃34;蛋糕店＆＃34;，显示道路路线，然后还显示点击蛋糕店标记时的估计行程时间。 感谢

＆＃13;

＆＃13;

< script >
  function detectBrowser() {
    var useragent = navigator.userAgent;
    var mapdiv = document.getElementById("map");
    if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1) {
      mapdiv.style.width = '100%';
      mapdiv.style.height = '100%';
    } else {
      mapdiv.style.width = '40%';
      mapdiv.style.height = '40%';
    }
  }
var myLatLng;
var latit;
var longit;

function geoSuccess(position) {
  var latitude = position.coords.latitude;
  var longitude = position.coords.longitude;
  var directionsService = new google.maps.DirectionsService;
  var directionsDisplay = new google.maps.DirectionsRenderer;

  myLatLng = {
    lat: latitude,
    lng: longitude
  };
  var mapProp = {
    zoom: 15,
    mapTypeId: 'roadmap',
  };
  var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
  var directionsService = new google.maps.DirectionsService;
  var directionsDisplay = new google.maps.DirectionsRenderer;
  //call renderer to display directions
  directionsDisplay.setMap(map);
  var bounds = new google.maps.LatLngBounds();

  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'My location'
  });
  var markers = [
    ['Cakeshop', -35.2442802, 149.08840750000002],
    ['my current location', latitude, longitude]
  ];
  // Info Window Content
  var infoWindowContent = [
    ['<div class="info_content">' +
      '<h3>Cakeshop</h3>' +
      '<p>Home to custom made cakes!</p>' +
      '<img src="Logo.png" width="150px" height="150px">' +
      '<p>Latitude: -35.2442802<br>Longitude: 149.08840750000002</p>' +
      '</div>'
    ],
  ];
  // Display multiple markers on a map
  var infoWindow = new google.maps.InfoWindow(),
    marker, i;
  // Loop through the array of markers & place each one on the map
  for (i = 0; i < markers.length; i++) {
    var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
    bounds.extend(position);
    marker = new google.maps.Marker({
      position: position,
      map: map,
      title: markers[i][0]
    });
    // Allow each marker to have an info window
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infoWindow.setContent(infoWindowContent[i][0]);
        infoWindow.open(map, marker);
        latit = marker.getPosition().lat();
        longit = marker.getPosition().lng();
        console.log("lat: " + latit);
        console.log("lng: " + longit);
      }
    })(marker, i));
    marker.addListener('click', function() {
      directionsService.route({
        // origin: document.getElementById('start').value,
        origin: myLatLng,
        // destination: marker.getPosition(),
        destination: {
          lat: latit,
          lng: longit
        },
        travelMode: 'DRIVING'
      }, function(response, status) {
        if (status === 'OK') {
          directionsDisplay.setDirections(response);
        } else {
          window.alert('Directions request failed due to ' + status);
        }
      });
    });
    // Automatically center the map fitting all markers on the screen
    map.fitBounds(bounds);
  }
}
// function calculateAndDisplayRoute(directionsService, directionsDisplay) {
//     directionsService.route({
//         // origin: document.getElementById('start').value,
//         origin: myLatLng,
//         destination: marker.getPosition(),
//         travelMode: 'DRIVING'
//     }, function(response, status) {
//         if (status === 'OK') {
//             console.log('all good');
//             directionsDisplay.setDirections(response);
//         } else {
//             window.alert('Directions request failed due to ' + status);
//         }
//     });
// }
function geoError() {
  alert("Google Maps will be unable to give you accurate directions");
}

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
    // alert("Geolocation is supported by this browser.");
  } else {
    alert("Browser's Stuffed");
  }
} <
/script>

＆＃13;

.googlemap {
  width: 40%;
  margin: auto;
  z-index: 5;
  position: relative;
  top: 50px;
  padding-top: 20%;
  padding-bottom: 20%;
  margin-bottom: 10px;
  outline: 4px solid black;
}

＆＃13;

<div class="googlemap" id="googleMap"></div>

＆＃13;

＆＃13;

＆＃13;