javascript - Updating Leaflet Marker Position Every x Seconds with JSON - Stack Overflow

admin管理员组

文章数量:1287791

I have a marker on my map representing the current location of the International Space Station (pulled from .json?callback=?). I'm also trying to get it to move every 1 second to follow along with the station's orbit.

This is the code I have now:

$.getJSON('.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);
               });
              });

Here's everything in a jsFiddle: /

It seems to place the marker in the correct position on load, but does not update every second as it should be. Any tips on what I'm doing wrong?

Thanks!

I have a marker on my map representing the current location of the International Space Station (pulled from http://open-notify-api.herokuapp./iss-now.json?callback=?). I'm also trying to get it to move every 1 second to follow along with the station's orbit.

This is the code I have now:

$.getJSON('http://open-notify-api.herokuapp./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);
               });
              });

Here's everything in a jsFiddle: http://jsfiddle/zmkqu/

It seems to place the marker in the correct position on load, but does not update every second as it should be. Any tips on what I'm doing wrong?

Thanks!

• javascript
• leaflet

Share Improve this question Follow asked Jan 22, 2013 at 19:54 FebriumFebrium 5511 gold badge22 silver badges55 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

You should put the whole Ajax call inside the setInterval callback. Right now you are setting the marker to the same position very second, because data does not change. You have to make a new call every second:

var iss;

function update_position() {
    $.getJSON('http://open-notify-api.herokuapp./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

Note: It's better to use setTimeout together with Ajax calls, since you don't know how a long it takes to get the response.

If you need to guarantee that it updates every second you probably want to modify this a bit... Right now it fires 1 second after the server responds with the json, which is most likely not 1 second since the last update.

What you want is something more like this:

 var iss
     , timeElapsed = 0;

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

    $.getJSON('http://open-notify-api.herokuapp./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();

You could probably go even farther with this... there will be some stuttering if a request takes more then a second for instance if your request takes longer then a second. But if that request is taking longer then a second you probably have other issues you need to deal with.

本文标签： javascriptUpdating Leaflet Marker Position Every x Seconds with JSONStack Overflow