基于高德地图的描点操作，监听地图缩放，展示合理数量的marker

原文:基于高德地图的描点操作，监听地图缩放，展示合理数量的marker

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/lx583274568/article/details/54089707

1.根据两点经纬度算两点之间的距离函数

function Rad(d){
       return d * Math.PI / 180.0;//经纬度转换成三角函数中度分表形式。
    }
//计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度
function GetDistance(lat1,lng1,lat2,lng2){

    var radLat1 = Rad(lat1);
    var radLat2 = Rad(lat2);
    var a = radLat1 - radLat2;
    var  b = Rad(lng1) - Rad(lng2);
    var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) +
    Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2)));
    s = s *6378.137 ;// EARTH_RADIUS;
    s = Math.round(s * 10000) / 10000; //输出为公里
    //s=s.toFixed(4);
    return s;
}

2.给地图绑定监听事件

map.on("zoomchange",function(){
            for (var i = pathContentArr.length - 1; i >= 0; i--) {
                pathContentArr[i].setMap(null);
            }
            for (var i = pathMarkerArr.length - 1; i >= 0; i--) {
                pathMarkerArr[i].setMap(null);
            }
            pathMarkerArr=[];
            pathContentArr=[];
            drawMarkerByDistance(map.getZoom())

        })  

3.drawMarkerByDistance函数【会根据第i个点和第i+1个点之间的距离进行初步筛选，其中select函数对初步筛选出来的点进行了所有点两两之间距离的二次筛选】

function drawMarkerByDistance(zoom){
        var perDistance=0;   //当前累计公里数
        var zoom=zoom||6;
        switch (zoom){
            case 3:
                var targetDistance=800;  //km
                break;
            case 4:
                var targetDistance=400;  //km
                break;
            case 5:
                var targetDistance=200;  //km
                break;
            case 6:
                var targetDistance=120;  //km
                break;
            case 7:
                var targetDistance=60;  //km
                break;
            case 8:
                var targetDistance=30;  //km
                break;
            case 9:
                var targetDistance=15;  //km
                break;
            case 10:
                var targetDistance=7;  //km
                break;
            case 11:
                var targetDistance=4;  //km
                break;
            case 12:
                var targetDistance=1;  //km
                break;
            case 13:
                var targetDistance=0.5;  //km
                break;
            default:
                var targetDistance=0.25;  //km
        }
        var prepareToShowMarker=[];
        for (var i = 0; i < curShipPolyLineData.length; i++) {
            //第一个点和最后一个点默认展示出来,累计长度大于目标长度的画出来
            if (i==0||i==curShipPolyLineData.length-1 || (curShipPolyLineData[i].distance+perDistance)>targetDistance) {
                var marker={
                    lat:parseFloat(curShipPolyLineData[i].latitude),
                    lng:parseFloat(curShipPolyLineData[i].longitude),
                    course:curShipPolyLineData[i].course,
                    AddTime: curShipPolyLineData[i].AddTime,
                }
                prepareToShowMarker.push(marker);
            }
            if(i<curShipPolyLineData.length-1 && i>1){
                if ((curShipPolyLineData[i].distance+perDistance)>targetDistance) {
                    perDistance=0;
                }else{
                    perDistance+=curShipPolyLineData[i].distance;
                }
            }
        }
        
        var select=function(arr){
            var flag=true;
            for(var i=0;i<arr.length;i++){
                for(var j=i+1;j<arr.length;j++){
                    var curdistance=GetDistance(arr[i].lat,arr[i].lng,arr[j].lat,arr[j].lng);
                    //如果还有靠得很近的点
                    if (curdistance<targetDistance) {
                        flag=false;
                        //随机剔除掉一个i和j之间的一个点
                        Math.random()>0.5?arr.splice(i,1):arr.splice(j,1);
                        break;
                    }
                }
                if(flag==false){
                    break;
                }
            }
            //当数组中所有的点两两之间的距离都大于targetDistance的时候退出递归
            if (flag==false) {
                select(arr);
            }
        }
        select(prepareToShowMarker);
        for (var i = prepareToShowMarker.length - 1; i >= 0; i--) {
            var position=[prepareToShowMarker[i].lng,prepareToShowMarker[i].lat];
            var content = new AMap.Marker({
                content:prepareToShowMarker[i].AddTime,
                position: position,
                title: prepareToShowMarker[i].AddTime,
                offset:new AMap.Pixel(20,0),
                map: map
            });
            pathContentArr.push(content);
            var marker = new AMap.Marker({
                offset:new AMap.Pixel(0,0),
                icon:"new_images/arrow_r.png",
                angle:((prepareToShowMarker[i].course-90)%360),
                position: position,
                map: map
            });
            pathMarkerArr.push(marker);
        }

        
    }