Question

当用户放大我的地图时，我发送当前的边界框以从数据库中获取多边形并将其设置在localStorage中。它们作为JSON传输，如[{"polygons":{"features":[{"geometry":{"coordinates":[...]]（当然具有实际坐标）。

bounds = getBounds();
$.ajax({
    url: '/getPolygons',
    type: 'POST',
    data: JSON.stringify(bounds),
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    success: function (data) {
        polyArray = JSON.parse(localStorage.getItem('polygons')) || [];
        polygons = data;
        polyArray.push(polygons);
        localStorage.setItem('polygons', JSON.stringify(polyArray));
    }
});

当用户进一步探索（平移，缩放）地图时，多边形将继续添加到相同的localStorage键。我的问题是，如何加载这些多边形，因为它们位于localStorage中？我想减少发送到数据库的请求数。如果某些多边形已经加载到地图上，我不想再从数据库中请求这些多边形。

我能够从localStorage设置和获取多边形，但我遇到的问题是逻辑，如下所示。这是完整的功能。

google.maps.event.addListener(map, 'idle', function () {
    if (localStorage.getItem('polygons')) {
        var data = JSON.parse(localStorage.getItem('polygons'));
        map.data.addGeoJson(data['polygons']);
    } else {
        bounds = getBounds();
        $.ajax({
            url: '/getPolygons',
            type: 'POST',
            data: JSON.stringify(bounds),
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: function (data) {
                addPolygons(data);
                polyArray = JSON.parse(localStorage.getItem('polygons')) || [];
                polygons = data;
                polyArray.push(polygons);
                localStorage.setItem('polygons', JSON.stringify(polyArray));
            }
        });
    }
});

这是上面使用的addPolygons函数：

function addPolygons(json) {
    data = json;

    if (typeof polygons !== 'undefined') {
        map.data.forEach(function(feature) {
            map.data.remove(feature);
        });
    }

    polygons = map.data.addGeoJson(data['polygons']);   
}

边界框的定义如下：

function getBounds() {
    var boundsNE = map.getBounds().getNorthEast();
    var boundsSW = map.getBounds().getSouthWest();
    var ne = [ boundsNE.lng(), boundsNE.lat() ];
    var nw = [ boundsSW.lng(), boundsNE.lat() ];
    var sw = [ boundsSW.lng(), boundsSW.lat() ];
    var se = [ boundsNE.lng(), boundsSW.lat() ];
    var ne = [ boundsNE.lng(), boundsNE.lat() ];
    var boundsArray = [ ne, nw, sw, se, ne ];
    return boundsArray;
}

编辑：它使用map.data.addGeoJson(data['polygons']);工作（请参阅我设置的IF语句中的第3行）。但是现在当我开始平移地图时，我没有看到从数据库中请求新的多边形（地图上不存在的多边形）。

编辑v2 ：我正在尝试的一件事是跟踪地图中心的变化。如果地图中心更改了X个值，则请求新的多边形。如果能让这个工作起作用，希望能更新答案。

编辑v3 ：这是第二次获取后polyArray的样子。初始提取为空。 [Object] 0: Object polygons: Object features: Array[209] type: "FeatureCollection" __proto__: Object __proto__: Object 1: Object polygons: Object features: Array[205] type: "FeatureCollection" __proto__: Object __proto__: Object length: 2 __proto__: Array[0]

Answer 1

改为使google.maps.event.addListener(map, 'idle', function ()成为bounds_changed函数。建议基于Google documentation：

Maps API独立触发后面这些事件，getBounds（）可以直到视口具有权威性之后才报告有用的结果改变。如果你希望在这样的事件之后得到bind（），请务必请改为监听bounds_changed事件。

“后者”事件意味着zoom_changed或center_changed可能不是最有效的方法。

EDITED SNIPPET （暂停一秒钟）：

var timeout;
google.maps.event.addListener(map, 'bounds_changed', function() {
    window.clearTimeout(timeout);
    timeout = window.setTimeout(function() {
      if (localStorage.getItem('polygons')) {
        ...
      } else {
        bounds = getBounds();
        ...
      }
    });
  },
  1000);

在localStorage中存储多边形

1 个答案: