2

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

我想在不重新加载整个页面的情况下自动更新表格和地图标记（我基本上是想消除地图瓦片层的flickr，并且数据库正在通过model.py中的一些随机生成的数据不断更新），但是我遇到以下问题。

  1. 当我refresh()仅在表格 div 上使用时，不知何故我的整个包装器 div 会递归地嵌入到我的表格 div 中，并且所有内容（地图和表格）都会刷新。

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

  3. 我的 setInterval 时间间隔为 5 秒，但 div 实际上并不是每 5 秒刷新一次。更像是每 1/2 秒，或者太快了。

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

  5. 编辑：添加到＃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);

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 的 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);
}

很抱歉发了这么长的帖子……我现在真的做不了什么，因为我的 chrome 仍然显示 Aw，Snap！

4

1 回答 1

1

这么长的帖子哦

让我们从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">
        ...
于 2013-08-14T10:04:02.763 回答