百度地圖上的標註物太多致使界面卡頓的解決辦法

百度地圖的API雖說覆蓋物多了能夠用聚合，但聚合使用下來，性能並很差

目前解決方案是，獲取地圖的左下角和右上角的經緯度，而後根據此經緯度範圍，到數據庫中搜索，把該區域內的覆蓋物取出標註到地圖上。

 

生成地圖時綁定事件，在移動和縮放時觸發：

 map.addEventListener("moveend", queryInRect);
//map.addEventListener("moveend", funMoveend);

map.addEventListener("zoomend", queryInRect);

 

 

function queryInRect (event) {
    //alert(event.type + '==' + event.target);

    var cp = map.getBounds(); // 返回map可視區域，以地理座標表示
    var sw = cp.getSouthWest(); // 返回矩形區域的西南角
    var ne = cp.getNorthEast(); // 返回矩形區域的東北角

    zoom = map.getZoom();

    if (zoom < defaultShowLampZoom) {
        // 放大級數小於17後，清除全部覆蓋物，但百度覆蓋物不能刪除
        // 之後作成清除非網關控制器 TODO
        var markers = getCurrentMarkers();
        for (var i=0; i<markers.length; i++) {
            map.removeOverlay(markers[i]);
        }
        return;
    }

    //若是放大到17級別，則取屏幕範圍內的標註
    var param = {
        swlng : sw.lng,
        swlat : sw.lat,
        nelng : ne.lng,
        nelat : ne.lat
    };
    $.ajax( {
        type : "POST",
        url : "queryInRect.action",
        data : param,
        dataType : "json",
        success : function(jsonData) {
            // 把數據加載到地圖上去。
            if (jsonData.rtnMsg) {
                alert(jsonData.rtnMsg);
                //window.location.href = "login.html";
                return;
            }
            if (jsonData.controllerList) {
                // 添加前清空地圖上標記物 TODO，應該是有，則不更新，而不是如今所有清空
                // 但不清空百度地圖標記物
                var markers = getCurrentMarkers();
                for (var i=0; i<markers.length; i++) {
                    map.removeOverlay(markers[i]);
                }

                $.each(jsonData.controllerList, function(i, controller) {
                    var point = new BMap.Point(controller.longitude, controller.latitude);
                    addMarker(point, controller, markers);

                    // 插入或更新數據採集的taffyDb
                    insertOrUpdateDataCollection(controller);
                    // 插入或更新故障信息的taffyDb
                    insertOrUpdateAlarm(controller);

                });

                //若是是樹上右擊定位而來，0.8秒後設置燈跳躍
                if (find) {
                    setTimeout(jumpIcon, 800);
                }
            }
        },
        error : function(XMLHttpRequest, textStatus, errorThrown) {
            //if (XMLHttpRequest.status == 12029 && textStatus == "error") {
            //alert("WEB服務器未啓動或已宕機，請聯繫管理員。");
            //}
            alert('服務器異常');
        }
    });
}