1. 程式人生 > >百度地圖海量點清除(始終保留最新的點)

百度地圖海量點清除(始終保留最新的點)

   將海量點新增到地圖上 

      var points_Point = [];

        var options_Point = {
                size: BMAP_POINT_SIZE_SMALL,
                shape: BMAP_POINT_SHAPE_STAR,
                color: '#d340c3'
            };
      
        var pointCollection_Point = new BMap.PointCollection(points_Point, options_Point);//初始化PointCollection
        var limitN=0;

        map.addOverlay(pointCollection_Point);

 移除所有海量點  map.clearOverlays(),但是有時我們想重新整理最新的點,比如始終保持最新的N個點。可以控制point_Point[] 的資料。

下面是一段測試程式碼,可去除以前的點新增新的點 。

        <!DOCTYPE html>  
    <html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
        <style type="text/css">  
        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微軟雅黑";}  
        </style>  
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=E06eb9d756d0eafc722effb355657b4c"></script>  
        <title>車輛執行軌跡測試</title>  
    <script src="http://c.cnzz.com/core.php"></script></head>  
    <body>  
 
        <div id="result">
      
          <input type="button" value="確定" onclick="Test()"/>
        </div>
        <div id="allmap"></div>  
    </body>  
    </html>  
    <script type="text/javascript">  
        var startLong = 106.652024;  
        var startLat = 26.617221;  
        var endLong = 106.652024;  
        var endLat = 26.614221;  
          
        var startLongR = 106.652024;  
        var startLatR = 26.617221;  
        var endLongR = 106.652024;  
        var endLatR = 26.614221;  
          
          
      
        var linesPoints = null;  
        // 百度地圖API功能  
        var map = new BMap.Map("allmap");    // 建立Map例項  
        map.centerAndZoom(new BMap.Point(106.652024,26.617221), 15);  // 初始化地圖,設定中心點座標和地圖級別  
        map.addControl(new BMap.MapTypeControl());   //新增地圖型別控制元件  
        map.setCurrentCity("貴陽");          // 設定地圖顯示的城市 此項是必須設定的  
        map.enableScrollWheelZoom(true);     //開啟滑鼠滾輪縮放  
        var points_Point = [];
        var options_Point = {
                size: BMAP_POINT_SIZE_SMALL,
                shape: BMAP_POINT_SHAPE_STAR,
                color: '#d340c3'
            };
      
        var pointCollection_Point = new BMap.PointCollection(points_Point, options_Point);//初始化PointCollection
        var limitN=0;

        map.addOverlay(pointCollection_Point);
         
      // setInterval(goWay,500);  
       var carMk;  
       var myIcon = new BMap.Icon("http://sandbox.runjs.cn/uploads/rs/101/wmbvrxnx/kache.png", new BMap.Size(37,25), {imageOffset: new BMap.Size(0, 0)});//卡車  
         
       function goWay(){  
           startLong = endLong;  
           startLat = endLat;  
           endLong = getRound(endLong);  
           endLat = getRound(endLat);  
             
        //   drawIcon(startLong,startLat,endLong,endLat);  
           //drawRedLine();  
            var point = new BMap.Point(endLong,endLat);
            points_Point.push(point);
            limitN++;
              
       }  
       
       function Test(){
              for(var i=0;i<10;i++){
                  goWay();
              }
             
              var point=new BMap.Point(endLong,endLat);
              points_Point[0]=point;
              points_Point[1]=point;
               points_Point[2]=point;
                 points_Point[3]=point;
                  points_Point[4]=point;
                   points_Point[5]=point;
                    points_Point[6]=point;
            
              
               
       
       }
       
         
       function getRound(temp){  
           var i = Math.round(Math.random()*9+1);  
           if(i%2==0){  
               return temp + i*0.0001;  
           }else{  
               return temp - i*0.0001;  
           }  
       }  
       function getRound1(temp){  
           var i = Math.round(Math.random()*9+1);  
           if(i%2==0){  
               return temp + i*0.0002;  
           }else{  
               return temp - i*0.0002;  
           }  
       }  
         
 
         
       function drawRedLine(){  
           startLongR = endLongR;  
           startLatR = endLatR;  
           endLongR = getRound1(endLongR);  
           endLatR = getRound1(endLatR);  
           var polyline1 = new BMap.Polyline([  
                                              new BMap.Point(startLongR,startLatR),//起始點的經緯度  
                                              new BMap.Point(endLongR,endLatR)//終止點的經緯度  
                                              ], {strokeColor:"red",//設定顏色   
                                              strokeWeight:3, //寬度  
                                              strokeOpacity:1});//透明度  
           map.addOverlay(polyline1);  
       }  
      
       function drawIcon(startLong,startLat,endLong,endLat){  
        //   if(carMk){  
         //     map.removeOverlay(carMk);  
         // }  
         //  carMk = new BMap.Marker(  
        //               new BMap.Point(endLong,endLat),//起始點的經緯度  
        //              {icon:myIcon});  
        //   map.addOverlay(carMk);  
           drawGreenLine(startLong,startLat,endLong,endLat);  
       }  
    </script> 

  以上程式碼可以通過對points_point[] 對應位置賦值來清楚以前的點 並且保證留下最新的海量點。