JSON으로 매 x 초마다 전단지 마커 위치 업데이트

Question

나는 국제 우주 정거장의 현재 위치 (http://open-notify-api.herokuapp.com/iss-now.json?callback=?)를 나타내는지도에 마커가 있습니다. 나는 또한 1 초마다 이동하여 역의 궤도를 따라 가도록 노력 중이다.

$.getJSON('http://open-notify-api.herokuapp.com/iss-now.json?callback=?', function(data) {     
       var latitude = data["data"]["iss_position"]["latitude"]; 
       var longitude = data["data"]["iss_position"]["longitude"]; 
       var iss = L.marker([latitude,longitude]).bindPopup("I am the ISS").addTo(map); 
       $(function() { 
       setInterval(function() { 
        iss.setLatLng([latitude,longitude]).update(); 
       },1000); 
       }); 
       }); 

여기 jsFiddle의 모든입니다 :

이

내가 지금 가지고있는 코드입니다 http://jsfiddle.net/zmkqu/

부하의 올바른 위치에 마커를 배치 할 것 같다,하지만 같은 초마다 업데이트하지 않습니다 그것은해야한다. 내가 뭘 잘못하고 있는지에 대한 조언?

감사합니다.

Answer 1

setInterval 콜백 내에 전체 Ajax 호출을 넣어야합니다. data이 변경되지 않기 때문에 지금 바로 마커를 동일한 위치로 설정하고 있습니다. 당신은 매 초마다 새 통화를 확인해야합니다 :

var iss; 

function update_position() { 
    $.getJSON('http://open-notify-api.herokuapp.com/iss-now.json?callback=?', function(data) { 
     var latitude = data["iss_position"]["latitude"]; 
     var longitude = data["iss_position"]["longitude"]; 
     if (!iss) { 
      iss = L.marker([latitude,longitude]).bindPopup("I am the ISS").addTo(map); 
     } 
     iss.setLatLng([latitude,longitude]).update(); 
     setTimeout(update_position, 1000); 
    }); 
} 

update_position(); 

DEMO

참고 : 그것은 Ajax 호출에 당신이 응답을 얻을하는 데 걸리는 긴 알 수 없기 때문에, 함께 setTimeout을 사용하는 것이 좋습니다.

Answer 2

매 초마다 업데이트되도록 보장해야하는 경우이 설정을 약간 수정하고 싶습니다 ... 서버가 json으로 응답 한 후 1 초가 지나면 바로 실행됩니다. 마지막 업데이트 이후 1 초가 아닐 가능성이 큽니다 .

var iss 
    , timeElapsed = 0; 

function update_position() { 
    elapsedTime = new Date().getMilliseconds(); 

    $.getJSON('http://open-notify-api.herokuapp.com/iss-now.json?callback=?', function(data) { 
     var latitude = data["data"]["iss_position"]["latitude"]; 
     var longitude = data["data"]["iss_position"]["longitude"]; 

     elapsedTime = new Date().getMilliseconds() - elapsedTime; 

     if (!iss) { 
      iss = L.marker([latitude,longitude]).bindPopup("I am the ISS").addTo(map); 
     } 
     iss.setLatLng([latitude,longitude]).update(); 
     setTimeout(update_position, 1000 - elapsedTime); 
    }); 
} 

update_position(); 

당신은 아마 요청이 인스턴스에 대한 초 후 더 걸리는 경우 요청이 걸리는 경우 ... 일부 망가있을 것조차 멀리 이것에 갈 수 :

은 당신이 원하는 것은 더이 같은 것입니다 1 초 이상. 그러나 요청이 오래 걸리면 처리해야 할 다른 문제가있을 수 있습니다.