谷歌地图。在地图上跟踪历史记录。由于坐标

时间:2017-07-20 09:00:44

标签: google-maps google-maps-api-3 google-direction google-maps-direction-api

我的应用会在Google地图上显示车辆的跟踪历史记录。我们每2分钟从我们的移动应用程序收到位置并存储数据库。之后,我们在地图上显示路线(使用JS API,路线服务)。

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    ...
     ],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  unitSystem: google.maps.UnitSystem.IMPERIAL
}

然而,有时位置可能不准确只有3-5米。作为示例,一些位置可以显示在即将到来的交通线上。因此,Google会创建围绕几个街区等的路线。 enter image description here

所以问题是:是否有任何可能的方法可以忽略这些不准确的点,只是“迫使”Google在一个方向上创建路线?

谢谢!

1 个答案:

答案 0 :(得分:0)

我有个主意。它看起来很有效,至少对于我在类似情况下选择的航路点而言。

我把腿(=航点之间的路段)放在一个for循环中。对于每个段,我计算/读取“沿着路线的距离”并将其除以飞行路径距离。这个比例应该是大约1.如果它远远超过1,那就是一些东西。我将阈值设置为2.0,你应该降低它(估计1到2之间的值)。

当找到这样一个因素时,我删除了那个航点(好吧,我在没有这个项目的情况下创建一个新的数组“newWaypoints”),然后重新开始,这会在2秒setTimeout之后产生一条红色路线。

该函数是递归的,我不知道应该删除的多个点会发生什么。也许它可能不止一次再试一次。

<style>
  #map {height: 400px;}
</style>
<div id="map"></div>
<div id="log"></div>
<input type="button" value="click" onclick="calc()">
<script>
var directionsDisplay;
var directionsService;
var map;
var maxFactor = 2.0;    // FEEL FREE TO GUESTIMATE ANOTHER VALUE
function initMap() {
  var start = new google.maps.LatLng(50.96622130043278,3.8518730520809185);
  var mapOptions = {
    zoom:7,
    center: start
  }
  map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsService = new google.maps.DirectionsService();
}
function calcRoute(start, end, waypoints, color) {
  directionsDisplay = new google.maps.DirectionsRenderer({ map: map, polylineOptions: {strokeColor: color} });
  var request = {
    origin: start,
    destination: end,
    waypoints: waypoints,
    provideRouteAlternatives: false,
    travelMode: 'DRIVING',
    unitSystem: google.maps.UnitSystem.IMPERIAL
  };
  directionsService.route(request, function(result, status) {
    if (status == 'OK') {
      var newWaypoints = [];

      directionsDisplay.setDirections(result);
      var legs = result.routes[0].legs;
      var problemIndex = -1;
      for(var i in legs) {
        var routeSegment = legs[i].distance.value;
        var origin = legs[i].start_location;
        var destination = legs[i].end_location;
        var flightpathDistance = google.maps.geometry.spherical.computeDistanceBetween(origin, destination);
        var factor = (routeSegment / flightpathDistance);
        if(factor > maxFactor && problemIndex == -1) {
          // too long
          problemIndex = i;
          document.getElementById('log').innerHTML += 'factor ' + factor.toFixed(2) + ' - segment looks too long. romove waypoint ' + i + ' (0 based)<br/>'; 
        }
        else if(factor > maxFactor && problemIndex == i -1) {
          if(i<legs.length - 1) {  // skip the destination; this is not a waypoint
            newWaypoints.push(waypoints[i]);
          }
          document.getElementById('log').innerHTML += 'factor ' + factor.toFixed(2) + ' - segment also too long, but the problem is probably the previous segment<br/>'; 
        }
        else {
          if(i<legs.length - 1) {  // skip the destination; this is not a waypoint
            newWaypoints.push(waypoints[i]);
          }
          document.getElementById('log').innerHTML += 'factor ' + factor.toFixed(2) + '<br/>';
        }
      }
      document.getElementById('log').innerHTML += '<hr/>';
      if(problemIndex > -1) {
        setTimeout(function() {
          calcRoute(start, end, newWaypoints, 'red');
        }, 2000);

      }
    }
  });      
}
function calc() {
  calcRoute(
    '50.95487921891042,3.879781222422025', 
    '51.002379049703315,3.757394492495223',
    [
      {location: '50.96622130043278,3.8518730520809185', stopover: true},
      {location: '50.9725522849737,3.8379914402503345', stopover: true},
      {location: '50.97957292616706,3.8236401199901593', stopover: true},  // This is the problem point, on the opposite side of the road
      {location: '50.98570531465853,3.81125807762146', stopover: true},
      {location: '50.98941308813775,3.8019619700935436', stopover: true}
    ],
    "blue"
  );
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap&libraries=geometry"></script>