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

百度地图的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('服务器异常');
		}
	});
}

 

 

你可能感兴趣的:(百度地图)