百度地图自定义弹窗infoBox

infoBox文档地址： https://api.map.baidu.com/library/InfoBox/1.2/docs/symbols/BMapLib.InfoBox.html

infobox依赖文件可以到这里下载：https://gitee.com/shiguangliangyi/dependent-file/blob/00d37b1ba2ffbbfd309305449711b4e7378878b5/infobox.js

1.引入

2.使用

   //初始化地图
    initMap() {
    
    
      let self = this;
      var map = new BMapGL.Map("map"); // 创建Map实例
      map.centerAndZoom(
        new BMapGL.Point(self.center.lng, self.center.lat),
        self.zoom
      ); // 初始化地图,设置中心点坐标和地图级别
      map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
      map.setMapType(BMAP_NORMAL_MAP);
      self.map = map;
      window.map = map;
      self.oldZoomNum = map.getZoom();
      const zoomEvent = debounce(event, 300);
      self.map.addEventListener("zoomend", zoomEvent);//监听地图缩放事件
      self.map.setMapStyleV2({
    
    
        styleJson: [
          {
    
    
            featureType: "poilabel",
            elementType: "all",
            stylers: {
    
    
              visibility: "off",
            },
          },
          {
    
    
            featureType: "manmade",
            elementType: "all",
            stylers: {
    
    
              visibility: "off",
            },
          },
          {
    
    
            featureType: "building",
            elementType: "all",
            stylers: {
    
    
              visibility: "off",
            },
          },
        ],
      });
 
      // 地图缩放防抖-(这个是缩放地图重新更新覆盖物的)不用管
      function debounce(fn, delay) {
    
    
        let timer = null;
        return function () {
    
    
          clearTimeout(timer);
          timer = setTimeout(() => {
    
    
            let ZoomNum = map.getZoom(); //初始化为14
            if (ZoomNum < self.oldZoomNum) {
    
    
              //缩小
              if (ZoomNum <= 14) {
    
    
                self.zoomChange(0);
                self.isPointMap = false;
              }
            } else {
    
    
              //放大
              if (ZoomNum >= 15 && !self.isPointMap) {
    
    
                self.zoomChange(1);
                self.isPointMap = true;
              }
            }
            self.oldZoomNum = ZoomNum;
          }, delay);
        };
      }
    },

	//添加图片覆盖物
    markerClick(node) {
    
    
        let point = new BMapGL.Point(node.lng, node.lat);
        var myIcon = new BMapGL.Icon(
          "/img/point.png",
          new BMapGL.Size(25, 25),
          {
    
    
            anchor: new BMapGL.Size(25, 25),
          }
        );
        // 创建标注对象并添加到地图
        var marker = new BMapGL.Marker(point, {
    
     icon: myIcon });
        this.map.addOverlay(marker);
        let obj = {
    
    
          item: item,
          lng: lng,
          lat: lat,
        };
        //覆盖物绑定点击事件，打开弹窗
        marker.addEventListener("click", (e) => {
    
    
          this.pointClick(obj);//点击事件传参
        });
      
    },
    //
   async pointClick(node) {
    
    
      //  infox弹窗
      let strHtml = `<div class="content bor1"  style="width:200px">
      <div class='infoBox_content_title'>{
    
    {
    
    title}}</div>
      <div class='infoBox_content_row'>今日上班人数：{
    
    {
    
    attNum}}</div>
      <div class='infoBox_content_row'>备注信息：{
    
    {
    
    note}}</div>
      </div>`;
      let res = await getOperPointInfo(node.item.id);//查詢事件
      strHtml = strHtml.replace("{
    
    {title}}", node.item.name);
      strHtml = strHtml.replace("{
    
    {attNum}}", res.data.attNum);
      strHtml = strHtml.replace("{
    
    {note}}", res.data.note);
      var infoBox = new BMapLib.InfoBox(map, strHtml, {
    
    
        closeIconMargin: "0px 10px 0 0",
        closeIconUrl: "/img/close.png",
        closeIconWidth: "16px",
        enableAutoPan: true,
        // align: INFOBOX_AT_TOP,
        offset: new BMapGL.Size(0, 30),
        enableAutoPan: true,
      });
      let point = new BMapGL.Point(node.lng, node.lat);//打开的坐标点
      infoBox.open(point);
    },