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

百度地图的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. }  

 

posted @ 2017-05-08 12:04  源哥来了  阅读(2089)  评论(0编辑  收藏  举报