通过 Google Maps API 计算行驶距离

Question

我想计算给定纬度和经度之间的行驶距离。 在我的项目中，我在道路上显示标记。 我想要的是计算这些标记之间的距离，而不是所有路线。 有人可以向我解释如何计算该距离吗？

我知道我应该在 DistanceMatrixService 上工作，但我不知道如何处理它。

我把标记放在哪里：

var pointsArray = response.routes[0].overview_path;
for (var i = 0; i < pointsArray.length; i++) {
    var marker = new google.maps.Marker ({
        position:pointsArray[i],
        draggable:false,
        map:map,
        flat:true
    });
}

Answer 1

如果pointsArray来自路线服务，您可以执行以下操作：

var pointsArray = response.routes[0].overview_path;
for (var i = 0; i < pointsArray.length; i++) {
  var marker = new google.maps.Marker({
    position: pointsArray[i],
    draggable: false,
    map: map,
    flat: true
  });
  markers.push(marker);
  google.maps.event.addListener(marker, 'click', (function (marker, i) {
    return function (evt) {
      var html = "marker #" + i + "<br />";
      if (i != (markers.length - 1)) {
        html += "<a href='javascript: google.maps.event.trigger(markers[" + (i + 1) + "],\"click\");'>next</a>&nbspdist:" + google.maps.geometry.spherical.computeDistanceBetween(markers[i].getPosition(), markers[i + 1].getPosition()).toFixed(2) + " meters<br />";
      }
      if (i !== 0) {
        html += "<a href='javascript: google.maps.event.trigger(markers[" + (i - 1) + "],\"click\");'>prev</a>&nbspdist:" + google.maps.geometry.spherical.computeDistanceBetween(markers[i].getPosition(), markers[i - 1].getPosition()).toFixed(2) + " meters";
      }
      infowindow.setContent(html);
      infowindow.open(map, marker);
    }
  })(marker, i))
}

另一种选择是从方向响应中获取距离。

代码片段：

 var infowindow = new google.maps.InfoWindow(); var markers = []; function initMap() { var directionsService = new google.maps.DirectionsService(); var directionsDisplay = new google.maps.DirectionsRenderer(); var map = new google.maps.Map(document.getElementById('map'), { zoom: 7, center: { lat: 37.4419, lng: -122.1419 } }); directionsDisplay.setMap(map); calculateAndDisplayRoute(new google.maps.LatLng(37.4419, -122.1419), new google.maps.LatLng(37.447597, -122.159582), directionsService, directionsDisplay, map); } function calculateAndDisplayRoute(start, end, directionsService, directionsDisplay, map) { directionsService.route({ origin: start, destination: end, travelMode: google.maps.TravelMode.DRIVING }, function(response, status) { if (status === google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); for (var i = 0; i < markers.length; i++) { markers[i].setMap(null); } markers = []; var pointsArray = response.routes[0].overview_path; for (var i = 0; i < pointsArray.length; i++) { var marker = new google.maps.Marker({ position: pointsArray[i], draggable: false, map: map, flat: true }); markers.push(marker); google.maps.event.addListener(marker, 'click', (function(marker, i) { return function(evt) { var html = "marker #" + i + "<br />"; if (i != (markers.length - 1)) { html += "<a href='javascript: google.maps.event.trigger(markers[" + (i + 1) + "],\\"click\\");'>next</a>&nbspdist:" + google.maps.geometry.spherical.computeDistanceBetween(markers[i].getPosition(), markers[i + 1].getPosition()).toFixed(2) + " meters<br />"; } if (i !== 0) { html += "<a href='javascript: google.maps.event.trigger(markers[" + (i - 1) + "],\\"click\\");'>prev</a>&nbspdist:" + google.maps.geometry.spherical.computeDistanceBetween(markers[i].getPosition(), markers[i - 1].getPosition()).toFixed(2) + " meters"; } infowindow.setContent(html); infowindow.open(map, marker); } })(marker, i)) } } else { alert('Directions request failed due to ' + status); } }); } google.maps.event.addDomListener(window, "load", initMap);

 html, body, #map { height: 100%; width: 100%; margin: 0px; padding: 0px }

 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <div id="map"></div>