Я работаю над приложением, используя Django, Leaflet, OSM и jQuery. Приложение отображает карту с маркерами и таблицу со всеми данными маркеров (время, широта, долгота).
Я хочу автоматически обновлять таблицу и маркеры карты без перезагрузки всей страницы (в основном я хочу устранить flickr слоя фрагментов карты, а база данных постоянно обновляется некоторыми случайно сгенерированными данными внутри model.py), но я столкнулся со следующими проблемами.
Когда я используюrefresh()только для элемента table div, каким-то образом весь мой элемент div-оболочки рекурсивно встраивается в элемент div таблицы, и все (и карта, и таблица) обновляются.Я написал функцию updateMarker() для обновления своих маркеров, но, похоже, она не работает.
У меня есть временной интервал setInterval, равный 5 секундам, но на самом деле div не обновляется каждые 5 секунд. Скорее каждые 1/2 секунды или что-то слишком быстро.Поскольку мое приложение подключается к OSM для фрагментов карты, могут ли все эти запросы «GET» потреблять мою пропускную способность? Дав программе поработать какое-то время, я понял, что больше не могу загружать Google, а Wi-Fi по-прежнему работал. Через некоторое время локальный хост начал падать как сумасшедший. Я дважды перезагружал свой компьютер и 5 раз проверял настройки Интернета, и локальный хост все еще падает, когда у меня включены сценарии, связанные с картой. Однако, когда я комментирую часть кода карты, мой локальный хост по большей части выглядит нормально, просто немного прерывисто, и проблема № 3 все еще остается.
РЕДАКТИРОВАТЬ: добавление к # 4, каждый раз, когда я запускаю сервер запуска сейчас (с кодом, связанным с картой), вывод терминала зависает на
[14/Aug/2013 03:42:01] "GET /static/js/jquery-1.10.2.min.map HTTP/1.1" 404 1744, а локальный хост просто идет Aw, Snap. :(БОЛЬШЕ РЕДАКТИРОВАТЬ: ЭТО ТОЛЬКО ИСПРАВЛЕНО??! я ничего не делал...
EDITED обновляет код AJAX:
function refresh() {
$.ajax({
url: '/#table',
success: function(data) {
$('#result').html(data); //adding an extra #result div to wrap #table
setInterval(refresh, 5000); //actually setting the refresh rate to 5s...
}
});
}
setInterval(refresh, 5000);
EDITED updateMarkers внутри моего файла .js,
// group markers to a layer and add the layer to map
function updateMarkers(LatLngArray) {
// if (myLayer){
// map.removeLayer(myLayer);
// }
$.ajax({
url:'/#map',
success: function(){
for (i=1;i<=LatLngArray.length;i++) {
myIcon = L.icon({iconUrl: 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld='+i+'|666699|FFFFFF'});
layArray.push(L.marker([LatLngArray[i].lat, LatLngArray[i].lng], {icon: myIcon}).bindPopup('<center><br>[LatLngArray[i].lat, LatLngArray[i].lng}}]</center>'));
}
myLayer = L.layerGroup(layArray);
map.addLayer(myLayer);
}
});
}
Еще один несколько актуальный вопрос. Я следовал руководству по брошюре OSM, чтобы попытаться установить добавлена функция «показ маркера при панорамировании пользователем», но она не работает. Когда я перемещаюсь по карте, скажем, начиная с США и двигаясь на восток, пока я снова не увижу США, все мои маркеры, которые были на США с другой стороны, больше не видны. Я буквально просто скопировал код. Внутри функции initmap() это выглядит так:
function initmap() {
// create the tile layer with correct attribution
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data © OpenStreetMap contributors';
var osm = new L.TileLayer(osmUrl, {minZoom: 2, maxZoom: 15, attribution: osmAttrib});
// start the map centering around the mediterrean
map = new L.Map('map', {
center: new L.LatLng(37.16, 18.87),
zoom: 2,
layers: [osm]
});
askForPlots();
map.on('moveend', onMapMove);
}
Извините за длинный пост... В данный момент я мало что могу сделать, так как мой хром все еще показывает Aw, Snap!
