BMapGL矢量地图infowindow关闭

 

因为是点的弹窗，基本都是在js中定义的

1、首先：定义infowindow

let closeFunction = '<span ref="close" class="infoWindowEvent">X</span>';

let infoWindowCont = `  <div class='BMap_bubble_content2 BMap_bubble_content_pcs'><div class='form'> ` + closeFunction +   ` <div class="flexDiv">

                            <span class="title">名称：</span>

                            <div class="info">

                              ${pointObj.name}

                            </div>

                          </div></div>

                            </div>

                            `;

2、然后将信息窗口添加到地图上

let infoWindow = new BMapGL.InfoWindow(infoWindowCont, opts); map.openInfoWindow(infoWindow, bPoint);

 3、为信息窗口添加点击事件

if (!infoWindow.isOpen()) {
        // 第一次触发infowindow是走这里
        infoWindow.addEventListener("open", function (e) {
          eventBtn();
        });
      } else {
        eventBtn();
      }
      function eventBtn() {
        let infoWindowEvent =
          document.getElementsByClassName("infoWindowEvent");
        for (var i = 0; i < infoWindowEvent.length; i++) {
          infoWindowEvent[i].addEventListener("click", (e) => {
            let attributes = e.target.attributes;
            if (attributes[0]?.value && attributes[0].value == "close") {
              _this.mapObj.closeInfoWindow();
            }
          });
        }
      }

4、样式修改

.infoWindowEvent {

      position: absolute;

      top: 5px;

      right: 15px;

      color: rgba(255, 255, 255, 0.7);

      cursor: pointer;

    }

 5、大功告成！看下效果：