Google 地图 JSON 未更新

Question

只是想让我的 JSON 文件每 5 秒更新我的 google 地图位置数据。

目前加载了初始数据集，但 json 文件中的连续流似乎无法正确加载。这是我在我的 Django 项目中使用的代码。

$(function() {
var locations = {};//A repository for markers (and the data from which they were constructed).
var MAPS_URL = "{% url 'alarmviewer:maps' %}";
//initial dataset for markers
var locs = {
    1: { info:'11111. Some random info here', lat:40.538834, lng:-74.555049 }, //these values are wrong
    2: { info:'22222. Some random info here', lat:40.543127, lng:-74.606598 },
    3: { info:'33333. Some random info here', lat:40.544770, lng:-74.632273 },
    4: { info:'44444. Some random info here', lat:40.489954, lng:-74.586175 }
};
var map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 11,
    center: new google.maps.LatLng(40.5000, -74.6203),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();




var auto_remove = true;//When true, markers for all unreported locs will be removed.

function setMarkers(locObj) {
    if(auto_remove) {
        //Remove markers for all unreported locs, and the corrsponding locations entry.
        $.each(locations, function(key) {
            if(!locObj[key]) {
                if(locations[key].marker) {
                    locations[key].marker.setMap(null);
                }
                delete locations[key];
            }
        });
    }

    $.each(locObj, function(key, loc) {
        if(!locations[key] && loc.lat!==undefined && loc.lng!==undefined) {
            //Marker has not yet been made (and there's enough data to create one).

            //Create marker
            loc.marker = new google.maps.Marker({
                position: new google.maps.LatLng(loc.lat, loc.lng),
                map: map
            });

            //Attach click listener to marker
            google.maps.event.addListener(loc.marker, 'click', (function(key) {
                return function() {
                    infowindow.setContent(locations[key].info);
                    infowindow.open(map, locations[key].marker);
                }
            })(key));

            //Remember loc in the `locations` so its info can be displayed and so its marker can be deleted.
            locations[key] = loc;
        }
        else if(locations[key] && loc.remove) {
            //Remove marker from map
            if(locations[key].marker) {
                locations[key].marker.setMap(null);
            }
            //Remove element from `locations`
            delete locations[key];
        }
        else if(locations[key]) {
            //Update the previous data object with the latest data.
            $.extend(locations[key], loc);
            if(loc.lat!==undefined && loc.lng!==undefined) {
                //Update marker position (maybe not necessary but doesn't hurt).
                locations[key].marker.setPosition(
                new google.maps.LatLng(loc.lat, loc.lng)
                );
            }
            //locations[key].info looks after itself.
        }
    });
}

var ajaxObj = {//Object to save cluttering the namespace.
    options: {
        url: MAPS_URL,//The resource that delivers loc data.
        dataType: "json"//The type of data tp be returned by the server.
    },
    delay: 5000,//(milliseconds) the interval between successive gets.
    errorCount: 0,//running total of ajax errors.
    errorThreshold: 5,//the number of ajax errors beyond which the get cycle should cease.
    ticker: null,//setTimeout reference - allows the get cycle to be cancelled with clearTimeout(ajaxObj.ticker);
    get: function() { //a function which initiates
        if(ajaxObj.errorCount < ajaxObj.errorThreshold) {
            ajaxObj.ticker = setTimeout(getMarkerData, ajaxObj.delay);
        }
    },
    fail: function(jqXHR, textStatus, errorThrown) {
        console.log(errorThrown);
        ajaxObj.errorCount++;
    }
};

//Ajax master routine
function getMarkerData() {
    $.ajax(ajaxObj.options)
    .done(setMarkers) //fires when ajax returns successfully
    .fail(ajaxObj.fail) //fires when an ajax error occurs
    .always(ajaxObj.get); //fires after ajax success or ajax error
}

setMarkers(locs);//Create markers from the initial dataset served with the document.
ajaxObj.get();//Start the get cycle.

setTimeout(function() {
    setMarkers(testLocs);
}, ajaxObj.delay);

});

这是我发送的JSON示例。

{% load staticfiles %}
{"testLocs":[
  { "info":"11111. Some random info here", "lat":40.538800,"lng":-74.555049},
  { "info":"11111. Some random info here", "lat":40.543100,"lng":-74.606598},
  { "info":"11111. Some random info here",  "lat":40.544700,"lng":-74.632273},
  { "info":"11111. Some random info here",  "lat":40.489900,"lng":-74.586175}]}

谁能找出我哪里出错了？ JSON 格式是否正确？这是基于 Beetroot-Beetroot's answer from this thread 提前致谢。

Answer 1

看来我没有在 javascript 中定义 json 数组的名称。我最后只是把名字完全去掉并返回它，它似乎工作正常。

{[
  { "info":"11111. Some random info here", "lat":40.538800,"lng":-74.555049},
  { "info":"11111. Some random info here", "lat":40.543100,"lng":-74.606598},
  { "info":"11111. Some random info here",  "lat":40.544700,"lng":-74.632273},
  { "info":"11111. Some random info here",  "lat":40.489900,"lng":-74.586175}
]}

Google 地图 JSON 未更新

Google maps JSON not Updating

javascript

json

django

google-maps

google-maps-api-3