<script src="js/bmap/textIconOverlay/textIconOverlay.js"></script>
<script src="js/bmap/MarkerClusterer_min.js"></script>

//初始化打點數據
var markers=[];
//初始化點聚合
var markerClusterer=new BMapLib.MarkerClusterer(page.map, {markers:markers}); 
var data=[]//數據
var markers = [];var pointslng=[]
  		data.forEach(function(item,idx){
  			var myIcon = new BMap.Icon("image/circle.png", new BMap.Size(24, 24), {
               // offset: new BMap.Size(20, 20), // 指定定位位置
                //imageOffset: new BMap.Size(0, 0) // 設置圖片偏移
            });
        	var pt=new BMap.Point(lng,lat);
  			pointslng.push(pt)
  	  		var marker=new BMap.Marker(pt,{icon:myIcon})
	  	  	marker.addEventListener('click', function (e) {
	  	      var str='<div>str</div>'
	  	      var p=new BMap.Point(e.point.lng,e.point.lat);
		      var myLabel = new BMap.Label(str,     //為lable填寫內容
		         {offset:new BMap.Size(0,0),                  //label的偏移量，為了讓label的中心顯示在點上
		         position:p});                                //label的位置
		         myLabel.setStyle({                                   //給label設置樣式，任意的CSS都是可以的
		         fontSize:"14px",               //字號
		         border:"0",                    //邊
		         textAlign:"left",            //文字水平靠左顯示
		         borderRadius:'5px',
		         color:'#fff',
		         cursor:"pointer",
		         AutoSize:"false",
		         maxWidth:'1000px',
		         backgroundColor:'rgba(0,0,0,0.7)'
		         });
		         myLabel.setZIndex(99)
		         map.addOverlay(myLabel);//把label添加到地圖上
	  	  });
 		   markers.push(marker);
  		})
  	  	//添加聚合點
		markerClusterer.addMarkers(markers)
		map.setViewport(pointslng)

pointData(data)
  	function pointData(data){//海量點
  		markers=[]//重新渲染需要清空
  		data.forEach(function(item,idx){
  			//logo_type 1:藍色，2：灰色，3：紅色
  			var logo='image/china_telecom.png';
  			var myIcon = new BMap.Icon(logo, new BMap.Size(16, 16));
           // myIcon.setImageSize(new BMap.Size(16, 16));這個可以修改圖片大小
        	var pt=new BMap.Point(item.lng,item.lat);
  	  		var marker=new BMap.Marker(pt,{icon:myIcon})
  	  		map.addOverlay(marker)
  	  		markers.push(marker)
	  	  	//PointClick(marker,item)//點擊事件可不寫
	  	  	//pointMouse(marker,item)//鼠標滑過事件可不寫
  		})
  	}

map.addEventListener("zoomend", function () {
    getBounds('zoomend');
 });
//地圖綁定拖拽事件
map.addEventListener('dragend', function(e){
   	getBounds('dragend');
});
/**
 * 獲取可視區域
 * @type {string} 類型
 * */
function getBounds(type){
    //函數節流
    if(getBounds.timer){
        clearTimeout(getBounds.timer);
        getBounds.timer=null;
    }
    getBounds.timer=setTimeout(function(){
        var map=page.map
        var bounds =  map.getBounds(),   //獲取可視區域
        SouthWest = bounds.getSouthWest(),   //可視區域左下角
        NorthEast = bounds.getNorthEast();   //可視區域右上角
       // console.log("當前地圖可視範圍是：" + SouthWest.lng + "," + SouthWest.lat + "到" + NorthEast.lng + "," + NorthEast.lat);
       var data=boundsShow(SouthWest.lng,NorthEast.lng,SouthWest.lat,NorthEast.lat)
       //把不在可視區域的maker隱藏起來
        for(var i=0,lengths=data.listhide.length;i<lengths;i++){
            data.listhide[i].hide();
        }
        console.log('共有：'+markers.length+'個點位，顯示：'+data.listshow.length+'個點位');//設置地圖上的marker數量) 
    },200);
    
}
/**
 * 在可視區域顯示，不在可視區域隱藏
 * @smlng {number} 小 經度
 * @bglng {number} 大 經度
 * @smlat {number} 小緯度
 * @bglat {number} 大緯度
 * 
 * return 返回顯示的數量與隱藏的數量
 * */
function boundsShow(smlng,bglng,smlat,bglat){
    var listhide=[],//隱藏的數據
        listshow=[];//顯示的數據
    for(var i=0,lengths=markers.length;i<lengths;i++){
        var _point=markers[i].point;
        //如果marker的經度 小於可視範圍的最大經度大於可視範圍的最小經度--
        //並且marker的緯度 小於可是範圍的最大緯度大於可視範圍的最小緯度--則需要顯示
        if(smlng<_point.lng && _point.lng<bglng && smlat<_point.lat && _point.lat < bglat){
            //顯示
            listshow.push(markers[i]);
            //如果之前被隱藏則顯示
            if(!markers[i].isVisible()){
                markers[i].show();
            }
        }else{
            //不顯示
            listhide.push(markers[i]);
        }
    }
    //返回顯示的數量與隱藏的數量
    return{
        listshow:listshow,
        listhide:listhide
    }
}