Question

我正在使用Django，Leaflet，OSM和jQuery开发应用程序。该应用程序显示带有标记的地图和包含所有标记数据（时间，纬度，lng）的表格。

我想自动更新表和地图标记而不重新加载整个页面（我基本上想要消除地图图块层的flickr，并且数据库不断被model.py中的一些随机生成的数据更新），但我遇到了以下问题。

~~当我只在表格div上使用refresh()时，不知为何包装器div以递归方式嵌入到我的表格div中，并且所有内容（包括地图和表格）都会刷新。~~

我写了一个updateMarker（）函数来更新我的标记，但它似乎不起作用。

~~我的setInterval时间间隔为5秒，但div实际上并不是每5秒刷新一次。更像是每1/2秒或某种方式太快。~~

由于我的应用程序连接到OSM以获取地图图块，所有这些“GET”查询是否可能占用我的带宽？让程序运行一段时间之后，我意识到我再也无法加载Google了，而且wifi仍然很好。再过一段时间，localhost开始像疯了一样崩溃。我重新启动计算机两次并检查了互联网设置5次，当我启用了地图相关脚本时，localhost仍然崩溃。然而，当我注释掉代码的地图部分时，我的本地主机在大多数情况下似乎都很好，只是有点不稳定而问题＃3仍然存在。

编辑：添加到＃4，每次我立即启动runserver（使用地图相关代码），终端输出卡在[14/Aug/2013 03:42:01] "GET /static/js/jquery-1.10.2.min.map HTTP/1.1" 404 1744 和localhost刚刚去了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);

在我的.js文件中编辑updateMarkers，

// 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's Leaflet Guide尝试设置“在用户平移时显示标记”功能，但它不起作用。当我在地图上徘徊时，说从美国开始向东移动直到我再次看到美国，我从海外看到的所有标记都不再可见了。我只是复制了代码。在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！

Answer 1

O.o后很长时间

让我们从When I use refresh() on only the table div...

开始

你确定你的ajax功能吗？我宁愿做这样的事情：

function refresh() {
    $.ajax({
        url: '/ #table', // this should grab only #table element...
        success: function(data) {
            // ...and it will insert it inside #result element
            $('#result').html(data); 
            setTimeout(refresh, 5000);
        }
    });
}

setTimeout(refresh, 5000);

html结构更新：

<div id="result">
    <div id="table">
        ...

AJAX刷新，setInterval计时和localhost崩溃

1 个答案: