Question

你好StackOverflow！

我一直在构建一个Web界面来显示网络上各种元素的通信状态。因为我知道这将是一场斗争，所以我一直在推迟到最后一点。

出于令人敬畏的原因，我希望各种设备的地理布局及其当前状态，因此决定实施googlemaps api来帮助我。

理念是通过ajax，地图每4秒更新一次标记（他们的图标）及其通信状态（通过django，ajax和JSON）。

我所依据的脚本基于Beetroot-Beetroot's answer from this thread. 而不是图标，他更新标记的位置。

我已对此进行了调整，以使图标从第一个状态变为第二个状态（例如，开启和关闭）。如此JSFiddle

中所示

现在，我意识到这是使用＆＃34;模拟Ajax＆＃34;正如Beetroot-Beetroot所说的那样，而不是被注释掉的不断更新版本（拉入Json文件）。

我一直在尝试使用视图＆amp; Django中的模板创建一个HTML文件，其中包含要放入的新信息＆＃34; var Locs＆＃34;并尝试导入它。这是行不通的，即使它确实令人难以置信的凌乱/不满。

所以，我的下一个行动计划只是制作一个JSON文件来更新＆＃34; Loc＆＃34;脚本中的数组。

我的问题最后，通过Django，我如何创建脚本可以引入的JSON文件并更新＆＃34; var Loc＆＃34;数组，有新信息吗？

这是JSON文件的HTML等价物，（使用Django标签来决定每个值if / else等）。

{% load staticfiles %}
var Locs = {
      1: { info:'Updated', lat:40.538834, lng:-74.555049, icon: {% if element1.communication_state == 'CS_AVAILABLE' %}'http://i.imgur.com/DCU6Bzc.png'{% else %}'http://i.imgur.com/8bJFdFV.png'{% endif %} },
      2: { info:'Updated', lat:40.543127, lng:-74.606598, icon: {% if element2.communication_state == 'CS_AVAILABLE' %}'http://i.imgur.com/DCU6Bzc.png'{% else %}'http://i.imgur.com/8bJFdFV.png'{% endif %} },
      3: { info:'Updated', lat:40.544770, lng:-74.632273, icon: {% if element3.communication_state == 'CS_AVAILABLE' %}'http://i.imgur.com/DCU6Bzc.png'{% else %}'http://i.imgur.com/8bJFdFV.png'{% endif %} },
      4: { info:'Updated', lat:40.489954, lng:-74.586175, icon: {% if element4.communication_state == 'CS_AVAILABLE' %}'http://i.imgur.com/DCU6Bzc.png'{% else %}'http://i.imgur.com/8bJFdFV.png'{% endif %} },
};

一旦我可以获得一个有效的JSON文件/ url到脚本它应该工作，我遇到的问题是我不知道如何通过Django生成格式正确的JSON文件。

一旦我能够生成JSON文件，这就是我认为将成为地图的最终脚本。

var locations = {};

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),
        icon: loc.icon,
        map: map
      });

      //Attach click listener to marker
      google.maps.event.addListener(loc.marker, 'click', (function(key) {
        return function() {
          if(locations[key]) {
            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);
      locations[key].marker.setIcon(loc.icon);
      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_JSON,//The resource that delivers loc data.
    dataType: "json"
  },
  delay: 4000,//(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.

感谢您的帮助，我意识到这是一个冗长的问题。我可以提供我的models.py，views.py，urls.py等链接，如果这会有所帮助。

Answer 1

没有意识到你可以创建一个模板.json文件，就像你可以使用.html文件一样。现在一切正常，再次看这个问题没有意义......

通过Django＆amp;刷新Google地图标记（更改图标） JSON

1 个答案: