Question

我想在地图上每隔5秒移动一个标记，现在我的代码在调试模式下工作我的意思是，无论何时我从调试模式标记切换到达，我都能看到标记在调试模式下的移动直接到目标的最后纬度点。

控制器代码：

app
  .controller('AboutCtrl', function ($scope,$http,leafletData,$timeout) {
$scope.markers = [];
    var iss;
    angular.extend($scope, {
      osloCenter: {
      }
    });
    function updatePoints(){
      $http.get('views/newdata.json').success(function(response) {
        leafletData.getMap('mymap').then(function(map) {

          for(var i = 0; i < response.length; i++){
            var latitude = response[i].lat
            var longitude = response[i].lng

            if (!iss) {
              iss = L.marker([latitude,longitude]).bindPopup("Vehicle is Here").addTo(map);
            }
            iss.setLatLng([latitude,longitude]).update();

            setTimeout(updatePoints, 5000);

          }
        });
      });
    }
    updatePoints();
    angular.extend($scope, {
        osloCenter: {
          lat: 12.98254,
          lng: 77.59258,
          zoom: 5
        },
        markers: {

        },
        defaults: {
          scrollWheelZoom: false
        }
      });
  });

HTML：

    <div>
  <leaflet id="mymap" lf-center="osloCenter" markers="markers" width="100%" height="480px"></leaflet>
</div>

JSON文件：

    [{
  "lat": 12.98254,
  "lng": 77.59258,
  "message": "T1"
}
,{
    "lat": 12.9829556,
    "lng": 77.59232369999999,
    "message": "T1"
  },
  {
    "lat": 12.98667086,
    "lng": 77.58870730000001,
    "message": "T1"
  },
  {
    "lat": 13.0322459,
    "lng": 77.53386159999999,
    "message": "T1"
  },
  {
    "lat":  13.0322459,
    "lng": 77.533861599999999,
    "message": "T1"
  },
  {
    "lat":  15.3165803,
    "lng":  75.143377,
    "message": "T1"
  },
  {
    "lat" : 18.6621962,
    "lng" : 73.7283022

  },
  {
    "lat" : 18.6621962,
    "lng" : 73.7283022

  },
  {

    "lat" : 19.0303032,
    "lng" : 73.0887804

  },
  {

    "lat" : 19.068712,
    "lng" : 72.90422909999999

  }
]

Answer 1

好的，我仔细阅读你的代码之后。超时部分是问题所在，但是您需要从下一个更改为其他内容，例如：

function updatePoints(i){
  $http.get('views/newdata.json').success(function(response) {
    leafletData.getMap('mymap').then(function(map) {
      i = i || 0; //set default 

      var latitude = response[i].lat
      var longitude = response[i].lng

      if (!iss) {
        iss = L.marker([latitude,longitude]).bindPopup("Vehicle is Here").addTo(map);
      }
      iss.setLatLng([latitude,longitude]).update();

      if (i<response.length) {
         $timeout(function () {updatePoints(i+1)}, 5000);
      }

    });
  });
}

这样，一次只能处理一个航点，而不是整个阵列。

Answer 2

可能是curlpit：

setTimeout(updatePoints, 5000);

将其替换为：

$timeout(updatePoints, 5000);

这确保了angularJS摘要周期的开始。

在地图角度传单中每5秒移动一个标记

2 个答案: