高德地图地图层级不同显示marker数量不同

页面渲染获取经纬度数据（mapData）以后初始化地图initMap()方法
页面效果

放大比例后点数变多

在这里插入图片描述

<template>
    <div class="hot_wrapper">
        <div class="map">
            <div style="height:100%;width:100%;outline: none!important;" id="container" tabindex="0"> </div>
        </div>
    </div>
</template>

<script>
import AMap from "AMap";
export default {
    data() {
        return {
            adCode: 330600, // 绍兴
            disProvince: null, // 区域图层
            depth: 2, // 区域等级 0省级 1市级 2区县级
            colors: {}, // 区域颜色330683 山乘州市
                                    // 330624 新昌县
                                    // 330604 上虞区
                                    // 330602 越城区
                                    // 330603 柯桥区
                                    // 330681 诸暨市
            city: '绍兴市',
            mapData:[],//地图经纬度数据
            mapDataMarker:[],//图层级变化点数量个数变化
            pathContentArr:[],//地图层级变化点数量提示
            unitId:'',//单位id
            iconPath:'',//图标路径
        }   
    },
    methods:{
    	initMap() {// 创建地图
            var that = this
            this.map = new AMap.Map('container', {
                zoom:10,
                zooms: [10,14],
                center:[120.535719,29.956348],
                // center:[120.580444,29.859701],
                resizeEnable: true,
                showIndoorMap: false,
                mapStyle:"amap://styles/0206dfbcbabc11e4971c1a2e6bcdda2e",
                // mapStyle:"amap://styles/darkblue",
                features:['point','road','bg'],//地图要素
                viewMode:"2D",
                pitch:45,
                zoomEnable:true,
                // dragEnable: false,
            })
            AMap.plugin('AMap.Geocoder', function() {
                that.geocoder = new AMap.Geocoder({
                })
            })
            that.drawMarkerByDistance(that.map.getZoom())//初始调用marker过滤方法。渲染地图
            this.map.on("zoomchange",function(){//改变层级。点位重新渲染
            	//清除地图上点位信息
                for (var i = that.mapDataMarker.length - 1; i >= 0; i--) {
                    that.mapDataMarker[i].setMap(null);
                }
                for (var i = that.pathContentArr.length - 1; i >= 0; i--) {
                    that.pathContentArr[i].setMap(null);
                }
                that.mapDataMarker=[];
                that.pathContentArr=[];

                that.drawMarkerByDistance(that.map.getZoom())
            })
        },
    },
     Rad(d){//经纬度转换成三角函数中度分表形式。
          return d * Math.PI / 180.0;
     },
     //计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度
      GetDistance(lat1,lng1,lat2,lng2){
          var radLat1 = this.Rad(lat1);
          var radLat2 = this.Rad(lat2);
          var a = radLat1 - radLat2;
          var  b = this.Rad(lng1) - this.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; //输出为公里
          return s;
      },
      //计算距离渲染点位
      drawMarkerByDistance(zoom){
          var that=this;
          var perDistance=0;   //当前累计公里数
          var zoom=zoom||10;
          switch (zoom){
              case 10:
                  var targetDistance=20  //km
                  break;
              case 11:
                  var targetDistance=10;  //km
                  break;
              case 12:
                  var targetDistance=5;  //km
                  break;
              case 13:
                  var targetDistance=1;  //km
                  break;
              default:
                  var targetDistance=0.25;  //km
          }
          var prepareToShowMarker=[];//复制获取的经纬度数据，进行条件筛选
          prepareToShowMarker=JSON.parse(JSON.stringify(that.mapData))
          for(var i in prepareToShowMarker){
              prepareToShowMarker[i].count=1
          }

          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= that.GetDistance(arr[i].latitude,arr[i].longitude,arr[j].latitude,arr[j].longitude);
                      //如果还有靠得很近的点
                      if (curdistance<targetDistance) {
                          flag=false;
                          //固定删掉一个点
                          arr[i].count=arr[i].count+arr[j].count;
                          arr.splice(j,1)

                          //随机剔除掉一个i和j之间的一个点
                          //var randomNum= Math.random();
                          // if(randomNum>0.5){
                          //     arr[j].count=arr[j].count+arr[i].count;
                          // }else{
                          //     arr[i].count=arr[i].count+arr[j].count;
                          // }
                          // randomNum>0.5?arr.splice(i,1):arr.splice(j,1);
                          break;
                      }
                  }
                  if(flag==false){
                      break;
                  }
              }
              //当数组中所有的点两两之间的距离都大于targetDistance的时候退出递归
              if (flag==false) {
                  select(arr);
              }
          }

          // 筛选点数
          select(prepareToShowMarker);

          // 循环渲染到地图上
          prepareToShowMarker.forEach(function(marker){
              //点数渲染
              var index=new AMap.Marker({
                  map: that.map,
                   icon: new AMap.Icon({            
                      image: that.iconPath,
                      size: new AMap.Size(70, 70),  //图标大小
                      imageSize: new AMap.Size(70, 70)
                  }),
                  position: [marker.longitude, marker.latitude],
                  offset: new AMap.Pixel(-13, -30),
                  clickable: true
              });
              that.mapDataMarker.push(index)

              index.on('click', markerUnitClick);

              //数量提示
              var num = new AMap.Marker({//创建报警数
                  content:`<span style="color:#fff;text-align: center;">${marker.count}</span>`,
                  offset: new AMap.Pixel(10,-22) // 相对于基点的偏移位置
              });
              num.setMap(that.map);
              num.setPosition([marker.longitude, marker.latitude]);
              that.pathContentArr.push(num)
              num.on('click', markerUnitClick);

              function markerUnitClick(){
                  that.$emit('markerUnitMap',marker.id);
                  
              }
          })
      }
}