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

Question

我想每5秒在地图上移动一个标记，现在我的代码在调试模式下工作我的意思是，我能够看到标记在调试模式下，只要我从调试模式标记切换到直接到达目的地的最后一个lat长点即可。

控制器代码：

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

也许curlpit：

setTimeout(updatePoints, 5000); 

替换方式：

$timeout(updatePoints, 5000); 

这可以确保angularJS消化周期是踢

Answer 2

好吧，当我有点更仔细地阅读你的代码。超时部分是问题，但你需要从改变下一这么别的东西，像这样的例子：

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

    }); 
    }); 
} 

这样，一个航点被同时处理，而不是整个数组。