移动/更新基于JSON的标记

时间:2017-06-20 05:19:19

标签: javascript jquery json google-maps

以下是我网站上的jquery代码。 ADS-B收发器正在上传带有纬度/长度飞机信息的实时.JSON。我已经将它们变成了标记,但它们只会在刷新页面时更新。我已经尝试过设定间隔并做了大量的研究,但还没有走得太远。 关于我能做什么的任何想法?也许我没有把Set Interval放在正确的位置。

function initialize() {

var mapOptions = {
center: new google.maps.LatLng(-36.363, 175.044),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);



$.getJSON('https://crossorigin.me/http://radar1.ddns.net:3080/data/aircraft.json', function(data){
             $.each( data.aircraft, function(i, value) {


            var myLatlng = new google.maps.LatLng(value.lat, value.lon, value.flight, value.altitude);
            var marker = new google.maps.Marker({
            position: myLatlng,
            icon: 'airplane.jpg',
            map: map,
            title: "Callsign   Altitude  "+value.flight+value.altitude

            });

     var marker = new google.maps.Marker({
position: new google.maps.LatLng(-37.008625, 174.785047),
icon: 'airport.png',
map: map,
});        



        });
});


}

1 个答案:

答案 0 :(得分:0)

Hey Kieran尝试以下代码,每20秒刷新一次地图。!

<script type="text/javascript">
var timerID = null;
var map;
var timerRunning = false;
var delay = 20000; // refresh every 20 seconds
var zoomToExtents = 0;
var openedInfoWindow = null;
// Initialize Timer
function initializeTimer() {

    initialize();
    StopTheClock();
    StartTheTimer();
}
function StopTheClock() {
    if (timerRunning)
        clearTimeout(timerID)
    timerRunning = false;
}
function StartTracking() {
    StartTheTimer();
}
function StartTheTimer() {
   // alert('hi');
    readData();
    timerRunning = true;
    timerID = self.setTimeout("StartTracking()", delay)
}


google.maps.event.addDomListener(window, 'load', initializeTimer);
function initialize() {

    var mapOptions = {
        center: new google.maps.LatLng(-36.363, 175.044),
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var infoWindow = new google.maps.InfoWindow();
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
    function readData() {

        $.getJSON('https://crossorigin.me/http://radar1.ddns.net:3080/data/aircraft.json', function (data) {
            $.each(data.aircraft, function (i, value) {


                var myLatlng = new google.maps.LatLng(value.lat, value.lon, value.flight, value.altitude);
                var Latlngs = new google.maps.LatLng(-37.008625, 174.785047);
                map.setCenter(Latlngs);
                var marker = new google.maps.Marker({
                    position: myLatlng,
                    icon: 'airplane.jpg',
                    map: map,
                    title: "Callsign   Altitude  " + value.flight + value.altitude

                });

                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(-37.008625, 174.785047),
                    icon: 'airplane.jpg',
                    map: map,
                });



            });
        });

    }