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))
}

另一种选择是让距离超出方向响应。

代码段

＆＃13;

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);

＆＃13;

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

＆＃13;

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

＆＃13;

通过Google Maps API计算驾驶距离

1 个答案: