vue2运用高德地图实现海量点标记

1、注册高德开发者，获取key，官方文档有详细教程，点击准备菜单，一步一步走  默认点标记-点标记-进阶教程-地图 JS API 2.0 | 高德地图API

2、在vue2项目里面引入，可以参考快速上手，所有的准备弄完就可以开发了

3、下面是完整代码

//设置一个地图容器
<div id="map_container">

</div>
//引入高德地图
  import AMapLoader from '@amap/amap-jsapi-loader';
//data里面的数据
mapList:[],
layer: null,
LabelsData:[],
//地图初始化配置和方法对接
initMap(){
        AMapLoader.load({
          key:"240466c4373e3ee81c9422c204b7d3e4",             // 申请好的Web端开发者Key，首次调用 load 时必填
          version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          plugins:[''],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        }).then((AMap)=>{
          this.map = new AMap.Map("map_container",{  //设置地图容器id
            viewMode:"3D",    //是否为3D地图模式
            zoom:10,           //初始化地图级别
            center:[117.196072,31.573739], //初始化地图中心点位置
            mapStyle: 'amap://styles/blue',
            expandZoomRange: true, //支持可以扩展最大缩放级别 
            // showLabel: false,
            // showIndoorMap: false,
          });
          this.initMarker(AMap);
        }).catch(e=>{
          console.log(e);
        })
      },
      initMarker(AMap) {
        var markerList = [];
        var markerLists = [];
//下面注释这一段是普通点打点的逻辑，如果后端返回的数据少可以参考
        // this.colorList.forEach(color =>{
        //   this.mapList.forEach(point => {
        //   if(point.colorDictId == 1){
        //     color = '/img/11.png'
        //   }
        //   if(point.colorDictId == 2){
        //     color = '/img/22.png'
        //   }
        //   if(point.colorDictId == 3){
        //     color = '/img/33.png'
        //   }
        //   if(point.colorDictId == 4){
        //     color = '/img/44.png'
        //   }
        //    // 创建一个 Icon
        //     var startIcon = new AMap.Icon({              
        //         // 图标尺寸
        //         size: new AMap.Size(6,6),
        //         // 图标的取图地址
        //         image: color,
        //         // 图标所用图片大小
        //         imageSize: new AMap.Size(6, 6),
        //         // 图标取图偏移量
        //         // imageOffset: new AMap.Pixel(-9, -3)
        //     });
        //   // 创建一个 Marker 实例：
        //   var marker = new AMap.Marker({
        //     position:  [point.longitude, point.latitude],   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        //     icon: startIcon,
        //     offset: new AMap.Pixel(-13, -30)
        //   });
        //   //给标记点添加点击事件
        //   // marker.on("click", function (e) {//给每一个点位增加点击事件
        //   //   alert('aaaaaaa')
        //   // });
          
        //   markerLists.push(marker)
        // })
        // })
        // this.map.add(markerLists);
        this.layer = new AMap.LabelsLayer({
          zooms: [3, 20],
          zIndex: 1000,
          collision: false,
          // 设置 allowCollision：true，可以让标注避让用户的标注
          // allowCollision: false,
        });
        this.layer.add(markerList);
        this.map.add(this.layer);
        // 初始化 labelMarker
        for (var i = 0; i < this.LabelsData.length; i++) {
          var curData = this.LabelsData[i];

          var labelMarker = new AMap.LabelMarker(curData);

          markerList.push(labelMarker);
        }
        // 将 marker 添加到图层
        this.layer.add(markerList);
        
      },


//后端返回的数据处理，因为需要根据不同状态来显示海量点的图标，自行删除和添加
this.colorList.forEach(color =>{
            
          this.LabelsData = Screen.archive_pos_color_list.map(item=>{
            if(item.colorDictId == 1){
            color = '/img/11.png'
          }
          if(item.colorDictId == 2){
            color = '/img/22.png'
          }
          if(item.colorDictId == 3){
            color = '/img/33.png'
          }
          if(item.colorDictId == 4){
            color = '/img/44.png'
          }
          var labelsData = {
            position: [item.longitude, item.latitude],
            zooms: [10, 20],
            opacity: 1,
            zIndex: 10,
            fold: true,
            icon: {
              // 图标类型，现阶段只支持 image 类型
              type: 'image',
              // 图片 url
              image: color,
              // 图片尺寸
              size: [6, 6],
              // 图片相对 position 的锚点，默认为 bottom-center
              anchor: 'bottom-center',
            },
          }
          return labelsData
        })
        })

//后端数据最好挂载在created里，地图方法放在mounted里面
mounted(){
      
      setTimeout(() => {
        this.initMap();
      }, 500)
//写了定时器是因为地图组件有时候加载不出来或者点加载不出来，这个不是最优办法，大佬可以提点一下
      
    },