Javascript 通过谷歌地图上的经纬度数组获取距离_Javascript_Jquery_Google Maps_Google Maps Api 3

Javascript 通过谷歌地图上的经纬度数组获取距离
javascript jquery google-maps google-maps-api-3
Javascript 通过谷歌地图上的经纬度数组获取距离,javascript,jquery,google-maps,google-maps-api-3,Javascript,Jquery,Google Maps,Google Maps Api 3,这是Javascript数组通过这个我想在google地图上画一条多段线用于车辆跟踪，并找到车辆行程的总距离。计算路径总距离最简单的方法是通过路径数组循环，并使用或与 google.maps.geometry.sphereal.ComputedDistanceBeween（latLngA，latLngB）方法并总结结果。（后一种情况下，必须加载几何图形库：https://maps.googleapis.com/maps/api/js?libraries=geometry） e、 g: 函数c
这是Javascript数组通过这个我想在google地图上画一条多段线用于车辆跟踪，并找到车辆行程的总距离。
计算路径总距离最简单的方法是通过路径数组循环，并使用或与
google.maps.geometry.sphereal.ComputedDistanceBeween（latLngA，latLngB）方法并总结结果。
（后一种情况下，必须加载几何图形库：https://maps.googleapis.com/maps/api/js?libraries=geometry）
e、 g:
函数calcPathLength（路径）{
var合计=0；
对于（变量i=0；i

这只会给出一个近似结果，因为两点之间的距离有时太大，并且路径不能精确地沿着道路
解决此问题的另一种方法是使用，在这种情况下，我们仍然存在点之间距离的问题，因为文档中说，连续的点对应该彼此之间的距离在300m以内。我认为我们能做的最好的事情就是在路径上添加更多的点。
在下面的示例中，我将演示如何显示和计算路径的总距离。为了你的目的，我修改了谷歌的Snap-to-Road演示。请注意，roads API需要API密钥，因此您应该用密钥替换YOUR_API_密钥
function calcPathLength(path){
    var total = 0;
    for (var i = 0; i < path.length - 1; i++) {
        var pos1 = new google.maps.LatLng(path[i].lat(), path[i].lng());
        var pos2 = new google.maps.LatLng(path[i + 1].lat(), path[i + 1].lng());
        total += google.maps.geometry.spherical.computeDistanceBetween(pos1, pos2);
    };
    return total;
};


道路空气污染指数示范
html，body，#map{
身高：100%；
边际：0px；
填充：0px
}
var apiKey='您的API密钥'//换上你的钥匙
//这是您提供的路径
变量路径=[
{“lat”：43.00678，“液化天然气”：-89.53743}，
{“lat”：43.00656，“液化天然气”：-89.53732}，
{“lat”：43.005878，“液化天然气”：-89.53797}，
{“lat”：43.005344，“液化天然气”：-89.53684}，
{“lat”：43.003834，“液化天然气”：-89.535400}，
{“lat”：43.003692，“lng”：-89.533834}，
{“lat”：43.006384，“液化天然气”：-89.533796}，
{“lat”：43.0120328，“液化天然气”：-89.533667}，
{“lat”：43.015931，“液化天然气”：-89.533635}，
{“lat”：43.023030，“液化天然气”：-89.5335390}，
{“lat”：43.032010，“液化天然气”：-89.533249}，
{“lat”：43.040221，“液化天然气”：-89.5329596}，
{“lat”：43.04632176，“液化天然气”：-89.5318224}，
{“lat”：43.052562，“液化天然气”：-89.5277883}，
{“lat”：43.060300，“液化天然气”：-89.52759526}，
{“lat”：43.06401556，“液化天然气”：-89.5268978}，
{“lat”：43.06681381，“液化天然气”：-89.5241620}，
{“lat”：43.0714224，“液化天然气”：-89.52499888}，
{“lat”：43.07468269，“液化天然气”：-89.52698371}，
{“lat”：43.07490213，“液化天然气”：-89.53292749}，
{“lat”：43.076203059，“液化天然气”：-89.53269145}，
{“lat”：43.0765949，“液化天然气”：-89.5314576}，
{“lat”：43.0793377，“液化天然气”：-89.53323862}，
{“lat”：43.0803799，“液化天然气”：-89.53454754}，
{“lat”：43.0835927，“液化天然气”：-89.5340754}，
{“lat”：43.08458789，“液化天然气”：-89.5334853}，
{“lat”：43.0844468，“液化天然气”：-89.53403256}，
{“lat”：43.08445469，“液化天然气”：-89.5352985}，
{“lat”：43.084619242，“液化天然气”：-89.5358993791}
]; 
var映射；
var snapdCoordinates=[]；
var extendedPath=[]；
var startMarker；
var末端标记；
var startIcon=https://mts.googleapis.com/maps/vt/icon/name=icons/spotlight/spotlight-航路点-a.png&text=a&psize=16&font=font/Roboto-Regular.ttf&color=ff333333&ax=44&ay=48&scale=1'；
var endIcon='1〕https://mts.googleapis.com/maps/vt/icon/name=icons/spotlight/spotlight-航路点-b.png&text=b&psize=16&font=font/Roboto-Regular.ttf&color=ff333333&ax=44&ay=48&scale=1'；
var信息窗口；
函数初始化（）{
变量映射选项={
缩放：12，
中心：{lat:43.040221，lng:-89.5329596}
};
map=new google.maps.map（document.getElementById（'map'），mapOptions）；
startMarker=new google.maps.Marker({
地图：地图，
位置：新建google.maps.LatLng（路径[0].lat，路径[0].lng），
图标：startIcon
});
endMarker=new google.maps.Marker({
地图：地图，
位置：新建google.maps.LatLng（路径[path.length-1].lat，路径[path.length-1].lng），
图标：endIcon
})
infowindow=new google.maps.infowindow（{content:''}）；
extendedPath=getExtendedPath（path）；//让我们扩展原始路径
runSnapToRoad（扩展路径）；
}
函数getExtendedPath（路径）{
var extPath=path；
var newPath=[]；
while（pointsTooFar（extPath））{//我们在点之间的所有距离都小于250米的情况下进行此操作
新路径=[]；
for（var i=0；i250）{//如果两点之间的距离大于250米，我们添加一个中间点
var insPos={“lat”：（extPath[i].lat+extPath[i+1].lat）/2，“lng”：（extPath[i].lng+extPath[i+1].lng）/2}；
新路径推送（insPos）；
}
}
push（extPath[extPath.length-1]）；
extPath=newPath；
}
返回extPath；
}
函数pointsToFar（pointPath）{
var tooFar=假；
对于（变量i=0；i250）{
tooFar=真；
打破
};
}; 
返回太远；
}
//将用户创建的多段线捕捉到道路并绘制捕捉的路径
函数runSnapToRoad（路径）{
var路径值=
function calcPathLength(path){
    var total = 0;
    for (var i = 0; i < path.length - 1; i++) {
        var pos1 = new google.maps.LatLng(path[i].lat(), path[i].lng());
        var pos2 = new google.maps.LatLng(path[i + 1].lat(), path[i + 1].lng());
        total += google.maps.geometry.spherical.computeDistanceBetween(pos1, pos2);
    };
    return total;
};

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Roads API Demo</title>
    <style>
      html, body, #map {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
    <script>
var apiKey = 'YOUR_API_KEY'; //Replace it with your key
            //This is the path you provided
var path = [
    { "lat": 43.00678, "lng": -89.53743 },
    { "lat": 43.00656, "lng": -89.53732 },
    { "lat": 43.005878, "lng": -89.53797 },
    { "lat": 43.005344, "lng": -89.53684 },
    { "lat": 43.003834, "lng": -89.535400 },
    { "lat": 43.003692, "lng": -89.533834 },
    { "lat": 43.006384, "lng": -89.533796 },
    { "lat": 43.0120328, "lng": -89.533667 },
    { "lat": 43.015931, "lng": -89.533635 },
    { "lat": 43.023030, "lng": -89.5335390 },
    { "lat": 43.032010, "lng": -89.533249 },
    { "lat": 43.040221, "lng": -89.5329596 },
    { "lat": 43.04632176, "lng": -89.5318224 },
    { "lat": 43.052562, "lng": -89.5277883 },
    { "lat": 43.060300, "lng": -89.52759526 },
    { "lat": 43.06401556, "lng": -89.5268978 },
    { "lat": 43.06681381, "lng": -89.5241620 },
    { "lat": 43.0714224, "lng": -89.52499888 },
    { "lat": 43.07468269, "lng": -89.52698371 },
    { "lat": 43.07490213, "lng": -89.53292749 },
    { "lat": 43.076203059, "lng": -89.53269145 },
    { "lat": 43.0765949, "lng": -89.5314576 },
    { "lat": 43.0793377, "lng": -89.53323862 },
    { "lat": 43.0803799, "lng": -89.53454754 },
    { "lat": 43.0835927, "lng": -89.5340754 },
    { "lat": 43.08458789, "lng": -89.5334853 },
    { "lat": 43.0844468, "lng": -89.53403256 },
    { "lat": 43.08445469, "lng": -89.5352985 },
    { "lat": 43.084619242, "lng": -89.5358993791 }
  ]; 
var map;
var snappedCoordinates = [];
var extendedPath = [];
var startMarker;
var endMarker;
var startIcon = 'https://mts.googleapis.com/maps/vt/icon/name=icons/spotlight/spotlight-waypoint-a.png&text=A&psize=16&font=fonts/Roboto-Regular.ttf&color=ff333333&ax=44&ay=48&scale=1';
var endIcon = 'https://mts.googleapis.com/maps/vt/icon/name=icons/spotlight/spotlight-waypoint-b.png&text=B&psize=16&font=fonts/Roboto-Regular.ttf&color=ff333333&ax=44&ay=48&scale=1';
var infowindow;
function initialize() {
  var mapOptions = {
    zoom: 12,
    center: {lat: 43.040221, lng: -89.5329596}
  };
  map = new google.maps.Map(document.getElementById('map'), mapOptions);
  startMarker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(path[0].lat, path[0].lng),
    icon: startIcon
  });
  endMarker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(path[path.length - 1].lat, path[path.length - 1].lng),
    icon: endIcon
  })
  infowindow = new google.maps.InfoWindow({content: ''});
  extendedPath = getExtendedPath(path); //Let's extend the original path
  runSnapToRoad(extendedPath);
}
function getExtendedPath(path) {
  var extPath = path;
  var newPath = [];
  while (pointsTooFar(extPath)){  //We do it while all the distance between points are less then 250 meters
      newPath = [];
      for (var i = 0; i < extPath.length - 1; i++) {
        var pos1 = new google.maps.LatLng(extPath[i].lat, extPath[i].lng);
        var pos2 = new google.maps.LatLng(extPath[i + 1].lat, extPath[i + 1].lng);
        var dist = google.maps.geometry.spherical.computeDistanceBetween(pos1, pos2);
        newPath.push(extPath[i]);
        if (dist > 250) {  //If the distance between two points is greater than 250 metres we add an intermediate point 
           var insPos = { "lat": (extPath[i].lat + extPath[i + 1].lat)/2, "lng": (extPath[i].lng + extPath[i + 1].lng)/2 };
            newPath.push(insPos);
        }
      }
      newPath.push(extPath[extPath.length-1]);
      extPath = newPath;
  }
  return extPath;
}

function pointsTooFar(pointPath){
  var tooFar = false;
  for (var i = 0; i < pointPath.length - 1; i++) {
    var pos1 = new google.maps.LatLng(pointPath[i].lat, pointPath[i].lng);
    var pos2 = new google.maps.LatLng(pointPath[i + 1].lat, pointPath[i + 1].lng);
    var dist = google.maps.geometry.spherical.computeDistanceBetween(pos1, pos2);
    if (dist > 250){
        tooFar = true;
        break;
    };
  }; 
  return tooFar;
}

// Snap a user-created polyline to roads and draw the snapped path
function runSnapToRoad(path) {
  var pathValues = [];
  for (var i = 0; i < path.length; i++) {
    pathValues.push((new google.maps.LatLng(path[i].lat, path[i].lng)).toUrlValue());
  }
  $.get('https://roads.googleapis.com/v1/snapToRoads', {
    interpolate: true,
    key: apiKey,
    path: pathValues.join('|')
  }, function(data) {
    processSnapToRoadResponse(data);
    drawSnappedPolyline();
    calcPathLength(snappedCoordinates);
  });
}

// Store snapped polyline returned by the snap-to-road service.
function processSnapToRoadResponse(data) {
  snappedCoordinates = [];
  for (var i = 0; i < data.snappedPoints.length; i++) {
    var latlng = new google.maps.LatLng(
        data.snappedPoints[i].location.latitude,
        data.snappedPoints[i].location.longitude);
    snappedCoordinates.push(latlng);
  }
}

// Draws the snapped polyline (after processing snap-to-road response).
function drawSnappedPolyline() {
  var snappedPolyline = new google.maps.Polyline({
    path: snappedCoordinates,
    strokeColor: '#00B3FD',
    strokeOpacity: 0.6,
    strokeWeight: 5
  });
  snappedPolyline.setMap(map);
}

function calcPathLength(cPath){
    var total = 0;
    for (var i = 0; i < cPath.length - 1; i++) {
        var pos1 = new google.maps.LatLng(cPath[i].lat(), cPath[i].lng());
        var pos2 = new google.maps.LatLng(cPath[i + 1].lat(), cPath[i + 1].lng());
        total += google.maps.geometry.spherical.computeDistanceBetween(pos1, pos2);
        console.log(google.maps.geometry.spherical.computeDistanceBetween(pos1, pos2).toFixed(0));
    };
    infowindow.setContent('<h4>Total length of the path: ' + (total / 1609.34).toFixed(1) + ' miles</h4>');
    infowindow.open(map, endMarker);
};

$(window).load(initialize);

    </script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>