Question

我有以下代码，当点击地图时，会绘制一条捕捉到道路的路线。我想要做的是找到存储在数组中的折线上每个标记之间的长度/距离，并在每次点击新标记时递增，因此最后可以显示行进的总距离。我尝试了在不同站点上找到的一些示例，但似乎没有一个符合我实际拥有的代码。

我现在正在查看Google Maps API文档并偶然发现了https://developers.google.com/maps/documentation/javascript/reference?csw=1#DistanceMatrixRequest但是没有关于它如何运作的示例。

  poly = new google.maps.Polyline({ map: map });
  google.maps.event.addListener(map, "click", function(evt) {

if (path.getLength() === 0) {
  path.push(evt.latLng);
  poly.setPath(path);
} else {
  service.route({
    origin: path.getAt(path.getLength() - 1),
    destination: evt.latLng,

    travelMode: google.maps.DirectionsTravelMode.DRIVING
  }, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      for (var i = 0, len = result.routes[0].overview_path.length;
          i < len; i++) {
        path.push(result.routes[0].overview_path[i]);

      }
    }
  });
}
var latitude_longitude = evt.latLng;
alert(latitude_longitude);////Gets latitude and Longitude - Latitude first - Longitude second

  });

可以找到当前发生的一个工作示例here

非常感谢任何帮助。

Answer 1

要计算折线的长度，请将所有顶点之间的距离相加：

var distance = 0;
for (var i = 0; i < path.getLength() - 2; i++) {
  distance += google.maps.geometry.spherical.computeDistanceBetween(path.getAt(i), path.getAt(i + 1));
}
alert(distance / 1000).toFixed(2) + " km [" + path.getLength() + "]");

working fiddle

工作代码段：

var geocoder;
var map;
var poly;
var path;
var service = new google.maps.DirectionsService();

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

  poly = new google.maps.Polyline({
    map: map
  });
  path = poly.getPath();
  google.maps.event.addListener(map, "click", function(evt) {
    var latitude_longitude = evt.latLng;
    // alert(latitude_longitude); ////Gets latitude and Longitude - Latitude first - Longitude second

    if (path.getLength() === 0) {
      path.push(evt.latLng);
      poly.setPath(path);
    } else {
      service.route({
        origin: path.getAt(path.getLength() - 1),
        destination: evt.latLng,

        travelMode: google.maps.DirectionsTravelMode.DRIVING
      }, function(result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
          for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
            path.push(result.routes[0].overview_path[i]);

          }
          var distance = 0;
          for (var i = 0; i < path.getLength() - 2; i++) {
            distance += google.maps.geometry.spherical.computeDistanceBetween(path.getAt(i), path.getAt(i + 1));
          }
          document.getElementById('info').innerHTML = (distance / 1000).toFixed(2) + " km [" + path.getLength() + "]";

        }
      });
    }
  });
}
google.maps.event.addDomListener(window, "load", initialize);

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

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="info"></div>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>

折线与街道对齐时计算Google地图折线的距离

1 个答案: