leaflet添加自定义标注且不遮挡点位图标

效果：丽水市的文字在图标上方，且图标能被点击到

 （默认你已经引入了leaflet地图）

// 写在初始化地图的方法里，必须放在mounted钩子中
 
  var customLabel = L.divIcon({
        html: '<div class="my-label">丽水市</div>',
        className: 'custom-marker-label'
      });

      // 添加自定义文本标注到地图上
      var labelMarker = L.marker([28.472068484091054, 119.95415579779068], {
        icon: customLabel,
        zIndexOffset: 0 // 防止标签与图标相互遮挡
      }).addTo(this.map);

::v-deep .my-label {
  font-size: 100px !important;
  color: red !important;
/*  width: 300px !important;*/
/*  height: 300px !important;*/
/*  border: 2px solid red !important;*/
}

效果：创建多个自定义文字图层并设置文字在下方以防遮挡

// data()       
areaNameArr: [
        {
          name: '青田县',
          latitude: 28.253148518039513,
          longitude: 120.00557480839221
        },
        {
          name: '缙云县',
          latitude: 28.629123856662666,
          longitude: 120.07686433811513
        },
        {
          name: '遂昌县',
          latitude: 28.489053165162595,
          longitude: 118.90633625330999
        },
        {
          name: '松阳县',
          latitude: 28.387435131283183,
          longitude: 119.3685683653843
        },
        {
          name: '云和县',
          latitude: 28.194089646137204,
          longitude: 119.46515417984762
        },
        {
          name: '庆元县',
          latitude: 27.568914512867543,
          longitude: 118.98452476978026
        },
        {
          name: '景宁畲族自治县',
          latitude: 27.818604319840805,
          longitude: 119.37776701438082,
        },
        {
          name: '龙泉市',
          latitude: 28.035078048201232,
          longitude: 118.84424537258359
        },
        {
          name: '莲都区',
          latitude: 28.491084519449394,
          longitude: 119.72501601399884
        }
      ] // 市区名

// methods
  // 创建自定义文本标注对象 （多个）
      setTimeout(() => {
        var areaMarker = []
        var areaMarkerGroup = []
        this.areaNameArr.forEach((item, index) => {
// 因为该县字数较多便单独设置样式，（动态样式不生效）有更好的办法的话可以联系我或者评论
          if (item.name === '景宁畲族自治县') {
            areaMarker = new L.marker(
              { lat: item.latitude, lng: item.longitude },
              {
                icon: L.divIcon({
                  html: `<div class="my-label-public my-label1">${item.name}</div>`,
                  className: 'custom-marker-label',
                })
              }
            )
          } else {
            areaMarker = new L.marker(
              { lat: item.latitude, lng: item.longitude },
              {
                icon: L.divIcon({
                  html: `<div class="my-label-public">${item.name}</div>`,
                  className: 'custom-marker-label',
                })
              }
            )
          }
          areaMarkerGroup.push(areaMarker);
        })
        areaMarkerGroup = L.layerGroup(areaMarkerGroup)
        this.map.addLayer(areaMarkerGroup)
      }, 200)

::v-deep .my-label-public {
  font-size: 20px !important;
  font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
  font-weight: bold;
  /*width: 76px !important;*/
  width: 276px !important;
  background: linear-gradient(180deg, #5985F3 0%, #FFFFFF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  z-index: -99 !important;
  // text-shadow: 2px 2px 4px rgba(255,255,255,1), -2px -2px 4px rgba(0,0,0,1);
}

 ::v-deep .my-label1 {
    width: 156px !important;
  }

  ::v-deep .custom-marker-label {
    z-index: 0 !important; // 设置文字层级在图标下方
  }

给已经创建的那些区县添加点击事件（完整版）

 // 创建地图
    initMap() {
      this.map = L.map("map", {
        center: [28.050543465368335, 119.61635697272764],
        zoom: 10,
        attributionControl: false, // 隐藏logo
        zoomControl: false,
        crs: L.CRS.Baidu,
      });
      // 添加底图
      //  L.tileLayer.chinaProvider('Baidu.Normal.Map').addTo(map)
      L.tileLayer.baidu({ layer: "custom_leave" }).addTo(this.map);
      // L.tileLayer.baidu({ layer: 'vec' }).addTo(this.map)


      // 创建自定义文本标注对象 （单个）
      // var customLabel = L.divIcon({
      //   html: '<div class="my-label">丽水市</div>',
      //   className: 'custom-marker-label'
      // });
      //
      // // 添加自定义文本标注到地图上
      // L.marker([28.472068484091054, 119.95415579779068], {
      //   icon: customLabel,
      //   zIndexOffset: 0 // 防止标签与图标相互遮挡
      // }).addTo(this.map);

      // 创建自定义文本标注对象 （多个）
      setTimeout(() => {
        var areaMarker = [];
        var areaMarkerGroup = [];
        this.areaNameArr.forEach((item, index) => {
          if (item.name === "景宁畲族自治县") {
            areaMarker = new L.marker(
              { lat: item.latitude, lng: item.longitude },
              {
                icon: L.divIcon({
                  html: `<div class="my-label-public my-label1">${item.name}</div>`,
                  className: "custom-marker-label",
                }),
              }
            );
          } else {
            areaMarker = new L.marker(
              { lat: item.latitude, lng: item.longitude },
              {
                icon: L.divIcon({
                  html: `<div class="my-label-public">${item.name}</div>`,
                  className: "custom-marker-label",
                }),
              }
            );
          }
          areaMarkerGroup.push(areaMarker);
        });
        this.areaMarkerClick(areaMarkerGroup)
        areaMarkerGroup = L.layerGroup(areaMarkerGroup);
        this.map.addLayer(areaMarkerGroup);
      }, 200);
    },

// 在这里实现点击
    areaMarkerClick(areaMarkerGroup) {
      console.log(areaMarkerGroup)
      var that = this;
      areaMarkerGroup.map((marker, i) =>
        marker.on("click", function (e) {
          console.log(e)
        })
      );
    },