déplacer un marqueur toutes les 5 secondes dans une carte angulaire

Question

Je veux déplacer un marqueur sur la carte toutes les 5 secondes, maintenant mon code fonctionne en mode débogage, je veux dire, je suis capable de voir le déplacement du marqueur mode de débogage, chaque fois que je passe du marqueur de mode de débogage atteint directement le dernier point long lat qui est la destination.

Code du contrôleur:

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 DOSSIER:

[{ 
    "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

Probablement le curlpit:

setTimeout(updatePoints, 5000); 

Remplacer que, par:

$timeout(updatePoints, 5000); 

Cela fait que le AngularJS cycle de digestion est kicks dans

Answer 2

Ok, Après avoir lu votre code un peu plus attentivement.. le délai d'attente est en partie le problème, mais vous devez passer de la sorte pour la prochaine quelque chose d'autre, comme celui-ci par exemple:

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

    }); 
    }); 
} 

De cette façon, un seul point de passage se traité à la fois, pas tout le tableau.