百度地图上的标注物太多导致界面卡顿的解决办法

时间:2023-02-19 22:54:25
百度地图的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('服务器异常');
}
});
}