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

百度地图的API虽然说覆盖物多了可以用聚合，但聚合使用下来，性能并不好

目前解决方案是，获取地图的左下角和右上角的经纬度，然后根据此经纬度范围，到数据库中搜索，把该区域内的覆盖物取出标注到地图上。

 

生成地图时绑定事件，在移动和缩放时触发：

Js代码  

1.  map.addEventListener("moveend", queryInRect);  
2. //map.addEventListener("moveend", funMoveend);  
3.           
4. map.addEventListener("zoomend", queryInRect);  

 

 

Js代码  

1. function queryInRect (event) {  
2.     //alert(event.type + '==' + event.target);  
3.       
4.     var cp = map.getBounds(); // 返回map可视区域，以地理坐标表示  
5.     var sw = cp.getSouthWest(); // 返回矩形区域的西南角  
6.     var ne = cp.getNorthEast(); // 返回矩形区域的东北角  
7.   
8.     zoom = map.getZoom();  
9.   
10.     if (zoom < defaultShowLampZoom) {  
11.         // 放大级数小于17后，清除所有覆盖物，但百度覆盖物不能删除  
12.         // 以后做成清除非网关控制器 TODO  
13.         var markers = getCurrentMarkers();  
14.         for (var i=0; i<markers.length; i++) {  
15.             map.removeOverlay(markers[i]);  
16.         }  
17.         return;  
18.     }  
19.       
20.     //如果放大到17级别，则取屏幕范围内的标注  
21.     var param = {  
22.         swlng : sw.lng,  
23.         swlat : sw.lat,  
24.         nelng : ne.lng,  
25.         nelat : ne.lat  
26.     };  
27.     $.ajax( {  
28.         type : "POST",  
29.         url : "queryInRect.action",  
30.         data : param,  
31.         dataType : "json",  
32.         success : function(jsonData) {  
33.             // 把数据加载到地图上去。  
34.             if (jsonData.rtnMsg) {  
35.                 alert(jsonData.rtnMsg);  
36.                 //window.location.href = "login.html";  
37.                 return;  
38.             }  
39.             if (jsonData.controllerList) {  
40.                 // 添加前清空地图上标记物 TODO，应该是有，则不更新，而不是现在全部清空  
41.                 // 但不清空百度地图标记物  
42.                 var markers = getCurrentMarkers();  
43.                 for (var i=0; i<markers.length; i++) {  
44.                     map.removeOverlay(markers[i]);  
45.                 }  
46.                   
47.                 $.each(jsonData.controllerList, function(i, controller) {  
48.                     var point = new BMap.Point(controller.longitude, controller.latitude);  
49.                     addMarker(point, controller, markers);  
50.                       
51.                     // 插入或更新数据采集的taffyDb  
52.                     insertOrUpdateDataCollection(controller);  
53.                     // 插入或更新故障信息的taffyDb  
54.                     insertOrUpdateAlarm(controller);  
55.                       
56.                 });  
57.                   
58.                 //如果是树上右击定位而来，0.8秒后设置灯跳跃  
59.                 if (find) {  
60.                     setTimeout(jumpIcon, 800);  
61.                 }  
62.             }  
63.         },  
64.         error : function(XMLHttpRequest, textStatus, errorThrown) {  
65.             //if (XMLHttpRequest.status == 12029 && textStatus == "error") {  
66.             //alert("WEB服务器未启动或已宕机，请联系管理员。");  
67.             //}  
68.             alert('服务器异常');  
69.         }  
70.     });  
71. }  

 

转载于:https://www.cnblogs.com/yzycoder/p/6824439.html