大屏首页高德地图并展示不同锚点和添加点击事件

1.创建地图容器，这里的地图是以组件的方式封装的（我使用的是高德地图）

  <!-- 地图组件 -->
  <div id="homeMapContainer">
    <!-- 地图容器 -->
      <div id="homeMap"></div>
  </div>

地图散点数据

props:{
    selectScatteredPointsArr:{
      type:Array
    }
  },

监听数据并扁平化赋值

  watch:{
    selectScatteredPointsArr(newVal, oldVal) {
        this.originalMarkers = newVal.flatMap(item => item.indexMapDataModels);
        console.log('this.originalMarkers',this.originalMarkers);
    },

2.页面挂载时调用init()方法

import AMapLoader from '@amap/amap-jsapi-loader';//引入api

mounted(){
    this.initMap()
  },

3.初始化数据

//初始化数据
data() {
    return {
      map:{},//地图实例
      originalMarkers:[],//地图标地点原始数据
      markers:[],//处理后的标记点数据
      layer:null,//点标记实例
      showMapIconDetail:false,//地图标记点详情弹窗
      parkInfo:{},//弹窗展示的数据分析
      parkInfoImgList:[],//弹窗展示的数据中的图片
      parkInfoOccupancy:[],//弹窗展示的数据中的占用数据
      initMapSuccess:false,//地图初始化成功标识
      path:'',
    }
  },

4.初始化地图函数

//初始化地图
    initMap() {
    console.log('地图加载');
    
      AMapLoader.load({
        key: "*******", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.MarkerClusterer"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
      }).then((AMap) => {
          this.map = new AMap.Map("homeMap", {
            center: [ 0, 0], // 初始化地图中心点位置
            viewMode: "3D", // 是否为3D地图模式
            zoom: 17, // 初始化地图级别
          });
          if(this.path==='/newThird/0'&&this.isFullScreen&&Object.keys(this.map).length>0){
            this.$store.commit('mapIsA/setIsFullScreenTyep',false)
            this.map.resize()
          }
          this.layer = new AMap.LabelsLayer({ //创建图层，用于显示标签
            zooms: [1, 20],
            zIndex: 1000,
            allowCollision:false,
            collision:false,
          })
         
          this.upDataMarkers(this.originalMarkers);
          this.initMapSuccess = true
          // this.createMassMarks()
        }).catch((e) => {
          console.log(e);
        });
    },

5.更新地图上的锚点数据标记点

    //更新标记点
    upDataMarkers(data){
    if(this.markers){ //检查是否存在旧的标记数组
      this.layer.remove(this.markers) //从图层中移除旧的标记
      this.layer.clear() //清空图层，移除所有标记
      this.markers = [] //重置标记数组为空
      this.map.remove(this.layer) //从地图中移除图层
     }
     const borderColorMap = {
              1: 'rgba(101, 163, 213, 1)', // 城顺通
              2: 'rgba(221, 85, 255, 1)', //  充电
              3: 'rgba(255, 158, 30, 1)', //  社会停车场
              4: 'rgba(85, 255, 179, 1)', // 停车
            }

      const newMarkers = data.map(item=>{ // 遍历传入的数据并生成新标记
          const textStyle = {  //为每个标记定义文本样式，设置字体大小、颜色、背景、边框等属性
                            fontSize: 12,
                            fontWeight: 'normal',
                            fillColor: '#ffffff',
                            strokeColor: '#000',
                            strokeWidth: 0,
                            fold: false,
                            padding: '2, 5',
                            backgroundColor: 'rgba(0,0,0,.5)',
                            borderColor: borderColorMap[item.mapType],
                            borderWidth:2,
                          };
          const newItems = {}
          newItems.name = item.parkId, //名称
          newItems.position = [Number(item.longitude),Number(item.latitude)] //坐标
          newItems.zooms = [1,20] //显示级别范围
          newItems.opacity=1 //透明度
          newItems.icon={type:'image',image:item.icon, size:[70,100], anchor:'center'}  //标记的图标
          newItems.text={content:item.parkName,direction:'bottom',offset:[0,-20],style:textStyle} //文本
          const labelMarker = new AMap.LabelMarker(newItems); //使用 AMap.LabelMarker 创建新的标记对象，将之前设置的 newItems 传递进去
          labelMarker.on('click',()=>{ //添加点击事件
            this.parkInfo = item 
            this.parkInfoImgList =  item.imgs.split(';')
            this.getParkDetailInfo(item.parkId)
            this.showMapIconDetail = true
          })
          return labelMarker
        })
        //更新标记列表并重新添加到图层 渲染
        this.markers = newMarkers; //将新创建的标记数组 newMarkers 赋值给 this.marker
        this.layer.add(this.markers)//将所有新标记添加到图层 this.layer 中
        this.map.add(this.layer)//将包含新标记的图层添加到地图中

    },