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


    百度地图的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. }  
  • 相关阅读:
    WebService之CXF注解之三(Service接口实现类)
    WebService之CXF注解之二(Service接口)
    WebService之CXF注解之一(封装类)
    JavaScript实现获取table中某一列的值
    sprintf,snprintf的用法(可以作为linux中itoa函数的补充)
    linux下Epoll实现简单的C/S通信
    WebService之CXF注解报错(三)
    WebService之CXF注解报错(二)
    Flex文件读取报错
    WebService之CXF注解报错(一)
  • 原文地址:https://www.cnblogs.com/yzycoder/p/6824439.html
Copyright © 2020-2023  润新知