javascript - 在 map Angular 传单中每 5 秒移动一个标记

Question

我想每 5 秒在 map 上移动一个标记，现在我的代码在 Debug模式下工作，我的意思是，每当我从 Debug模式切换到标记到达直接到达目的地的最后一个经纬度点。

Controller 代码:

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

好的，在我更仔细地阅读了您的代码之后。超时是部分问题，但您需要从 for next 更改为其他内容，例如:

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

    });
  });
}

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