지도의 각주에서 매 5 초마다 마커 이동

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

아마 curlpit :

setTimeout(updatePoints, 5000); 

교체가에 의해 다음 AngularJS와는 사이클에서 차기 다이제스트 확인합니다

$timeout(updatePoints, 5000); 

확인

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

    }); 
    }); 
} 

이러한 방식으로, 하나의 웨이 포인트가없는 전체 배열 한 번에 처리됩니다.