leaflet实现添加信息窗体

 效果：实现鼠标移入点位出现信息窗体，移出自动消失

 ·

 import L from "leaflet";
  import "leaflet/dist/leaflet.css";
  //  引入互联网地图插件
  require("@/utils/leftletMap/leaflet.ChineseTmsProviders.js");
  require("@/utils/leftletMap/tileLayer.baidu.js");
  // 引入互联网地图纠偏插件
  require("@/utils/leftletMap/leaflet.mapCorrection.min.js");

data() {
return: {
    /* 灾毁点位 */
        disasterDamageMarkerGroup: [],
        disasterDamageList: [],
        /* 灾毁点位 */
}
}


  /**
       * @Event 方法
       * @description: 初始化地图
       * */
      initMap() {
        this.showMap = true;
        this.map = L.map("map", {
          center: [28.165101, 119.433452],
          zoom: 10,
          attributionControl: false, // 隐藏logo
          zoomControl: false,
          crs: L.CRS.Baidu,
        });
        L.control
          .zoom({
            position: "bottomright",
          })
          .addTo(this.map);
        L.tileLayer.baidu({layer: "custom_online"}).addTo(this.map); // 添加底图

        /* 绘制灾毁信息点位 */
        this.map.removeLayer(this.disasterDamageMarkerGroup);
        this.drawDisasterDamageMarker();
        /* 绘制灾毁信息点位 */

        /* 地图缩放改变聚合点 */
        this.map.on("zoomend", (e) => {
          // doSomething
        });
        /* 地图移动改变聚合点 */
        this.map.on("moveend", (e) => {
          // doSomething
        });
      },


   /**
       * @Interface 接口
       * @description: 获取灾毁点位数据
       * */
      drawDisasterDamageMarker() {
        this.disasterDamageMarkerGroup = []
        var markerGroup = [];
        var markerIcon = "";
        markerIcon = L.divIcon({
          className: "markerBox",
          html: '
',
          iconSize: [40, 40], // 图标图像的尺寸，单位是像素。
        });
        this.getMarkerParams();
        polyDiseaseClaim(this.markerParams).then((res) => {
          console.log(res)
          if (res.code === 1 && res.data !== []) {
            this.disasterDamageList = res.data;
            this.disasterDamageList.map((item) => {
              var disasterDamageMarker = [];
              if (item.cluster) {
                disasterDamageMarker = new L.Marker(
                  {lat: item.y, lng: item.x},
                  {icon: markerIcon}
                );
                markerGroup.push(disasterDamageMarker);
              } else {
                disasterDamageMarker = new L.Marker(
                  {
                    lat: item.data.latitude,
                    lng: item.data.longitude,
                  },
                  {icon: markerIcon}
                );
                markerGroup.push(disasterDamageMarker);
              }
            });
            this.disasterDamageMarkerGroup = L.layerGroup(markerGroup);
            this.map.addLayer(this.disasterDamageMarkerGroup);
            /* 灾害信息点位的点击事件 */
            this.handleClickMarker(markerGroup, this.disasterDamageList, "灾害信息");
            // 打开信息窗体
            this.showPopup(markerGroup, this.disasterDamageList);
             // 移除
           this.hidePopup(markerGroup);
          }
        })
      },

重点在这：

  /**
      * @Event 方法
      * @description: 打开popup信息窗
      * */
      showPopup(markerGroup, helpList, name) {
        markerGroup.map((marker, i) =>
          marker.on("mouseover", function (e) {
            marker
              .bindPopup(
                helpList[i].data.soleName,  // 这个是你的提示文字
                {
                  className: "leafletPopupClass",
                  offset: [3, -16], // 偏移量
                }
              )
              .openPopup();
          })
        );
      },

      /**
      * @Event 方法
      * @description: 关闭popup弹窗
      * */
      hidePopup(markerGroup) {
        markerGroup.map((marker, i) =>
          marker.on("mouseout", function (e) {
            marker.closePopup();
          })
        );
      },