仅当getBounds值超出先前返回值时,才从服务器获取数据,否则将受到限制

Fetch data from server only when getBounds value is outside previous returned value else restrict

本文关键字:获取 服务器 数据 受到限制 仅当 返回值 getBounds      更新时间:2023-09-26

我正在实现的技术称为:"Viewport Marker Management"定义在这个链接:太多的标记:Viewport Management

如所述,我正在收听地图的变化,当地图"空闲"时,它调用回调,我正在获取边界值并向服务器查询以获取数据列表以填充地图中的标记。

这里的问题是,我每次都在地图边界的变化抓取数据。我想只调用服务器,当边界值高于前一个值,换句话说,当用户放大时,我需要获得更多的数据,所以需要调用服务器,但是当用户放大时不想调用服务器来获取数据。我还需要获取数据时,用户锅。

我的当前代码:

google.maps.event.addListener(Map.map, 'idle', function(){
            var bounds = Map.map.getBounds();
            query_params.bounds= bounds;
            AppAction.getMapLocationList(query_params);
});

我在代码中做什么:

1)地图。Map是对其他js文件中定义的Map的引用相当于map

2) query_params。中设置一个新属性Query_params对象称为bounds,它将获得值from getBounds() function

3) AppAction.getMapLocationList(query_params)这基本上是传递对象到我从对象生成url的其他js文件属性从服务器获取数据。

我是这样做的。latlnbounds有一个contains方法,你可以使用它来查看一个bounds对象是否包含latln_对象。

因此,您可以获得最后的边界东北和西南坐标,并查看地图边界(缩放后)是否包含它们。这样你就可以推断出用户是放大了还是缩小了。
function initialize() {
    var myLatLng = new google.maps.LatLng(46.2, 6.17);
    var mapOptions = {
        zoom: 4,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    var bounds = new google.maps.LatLngBounds();
    var lastBounds = new google.maps.LatLngBounds();
    // Set the last bounds to the map bounds (once)
    google.maps.event.addListenerOnce(map, 'idle', function() {
        lastBounds = map.getBounds();
    });
    // Listen for the zoom changed event
    google.maps.event.addListener(map, 'zoom_changed', function () {
        // Get the new map bounds
        bounds = map.getBounds();
        // Get the last bounds NE and SW coordinates
        var ne = lastBounds.getNorthEast();
        var sw = lastBounds.getSouthWest();
        // Check if current bounds contain the last bounds NE and SW coordinates
        if (bounds.contains(ne) && bounds.contains(sw)) {
            // Map bounds after zoom changed contains the last bounds NE and SW coordinates => you zommed out
            console.log('zoomed out');
        }
        // Set last bounds to current bounds
        lastBounds = bounds;
    });
}
initialize();
<<p> JSFiddle演示/kbd>