自定义百度地图inforwindow弹出功能

        最近在做大屏可视化的时候，有一个需求就是需要点击列表时在地图上弹出对应的车辆的信息窗口，虽然通过调用map的openInfoWindow可以弹出，但有一个问题是，我的车辆移动时，信息窗口也要跟着移动，而inforwindow原本是addEventListener click事件通过this.openInfoWindow弹出来的，但是现在是通过点击其他地方弹出来的，所以信息窗口就不会跟着点击点移动了，官方文档也没有对应的介绍，想了一圈，通过将点击后执行的事件进行封装，然后在自定义点击的时候，通过循环map的getOverlays()方法返回的所有的点，找到对应的事件并执行，就可以了

1，封装点击后的方法

for (let n = 0; n < this.carInfo.length; n++) {
        var myIcon = new BMap.Icon("https://handchain-1255060548.cos.ap-guangzhou.myqcloud.com/static/image/map_car_1.png", new BMap.Size(45.6, 35.6), {
          imageSize: new BMap.Size(45.6, 35.6),
        });
//将所有点信息保存到对象里去
        this.nowPoint[this.carInfo[n].id] = new BMap.Point(this.carInfo[n].longitude, this.carInfo[n].latitude);
        this.nowMarker[this.carInfo[n].id] = new BMap.Marker(this.nowPoint[this.carInfo[n].id], { icon: myIcon });
        this.map.addOverlay(this.nowMarker[this.carInfo[n].id]);
//在地图的marker对象里添加id作为标识，以便后面查询
        this.nowMarker[this.carInfo[n].id].id = this.carInfo[n].id;
//将点击事件进行封装，因原来的监听click对象里的this才有openInfoWindow方法才能这么做
        this.nowMarker[this.carInfo[n].id].clickFun = function () {
          var sContent = `<div class="tip-view"><div class="tip-view-content"><h4 class="tip-view-tit"><span>${_this.carInfo[n].numberPlate}</span> <span class="tip-view-tit-r tip-view-tit-video1"><img src="https://handchain-1255060548.cos.ap-guangzhou.myqcloud.com/static/image/map_phone_icon.png"  class="tip-view-tit-r-1"/><img src="https://handchain-1255060548.cos.ap-guangzhou.myqcloud.com/static/image/map_video_icon.png" class="videoIcon"/><img src="https://handchain-1255060548.cos.ap-guangzhou.myqcloud.com/static/image/infor_window_close.png" class="infor-close-icon"/></span><span class="tip-view-tit-r tip-view-tit-video2"><img src="https://handchain-1255060548.cos.ap-guangzhou.myqcloud.com/static/image/qp.png" class="qp-icon"/><img src="https://handchain-1255060548.cos.ap-guangzhou.myqcloud.com/static/image/infor_window_close.png" class="infor-close-icon"/></span></h4>
          <div class="tip-view-flex video-check1">
            <div class="tip-view-driver"><img src="${_this.carInfo[n].imgUrl}"/><p class="tip-view-driver-name">${_this.carInfo[n].driver}</p></div>
            <div class="tip-view-car ">
              <div class="tip-view-car-row">
                <dl>
                  <dt>车辆状态</dt>
                  <dd>${_this.carInfo[n].status == 1 ? '运行中' : _this.carInfo[n].status == 2 ? '未启用' : '维修中'}</dd>
                </dl>
                <dl>
                  <dt>当前载重</dt>
                  <dd>${_this.carInfo[n].currentLoad}吨</dd>
                </dl>
              </div>
              <div class="tip-view-car-row">
                <dl>
                  <dt>当前车速</dt>
                  <dd>${_this.carInfo[n].rate}KM/H</dd>
                </dl>
                <dl>
                  <dt>剩余电量</dt>
                  <dd>${(_this.carInfo[n].remainingBattery * 100).toFixed(1)}%</dd>
                </dl>
              </div>
              <div class="tip-view-car-row">
                <dl>
                  <dt>平均能耗(kwh/km)</dt>
                  <dd>${_this.carInfo[n].averageEnergyConsumption}</dd>
                </dl>
                <dl>
                  <dt>今日行驶里程</dt>
                  <dd>${_this.carInfo[n].todayMileage}公里</dd>
                </dl>
              </div>
            </div>
            </div>
            <div class="infor-bot-bg video-check1"><img src="https://handchain-1255060548.cos.ap-guangzhou.myqcloud.com/static/image/infor_bot_bg.png"/></div>
            <div class="video-check2">
            <video width="100%" height="220" controls autoplay>
              <source src="http://192.168.0.105:8830/image/car_video.mp4" type="video/mp4">
            </video>
          </div>
          </div>
          
          </div>`;
          var infoWindow = new BMap.InfoWindow(sContent);
          _this.nowInfoWindow[_this.carInfo[n].id] = infoWindow;
          this.openInfoWindow(infoWindow);
//下面是自定义信息框里对象的点击事件，可以不用管
          if (!infoWindow.isOpen()) {
            infoWindow.addEventListener("open", function () {
              $('.videoIcon').click(function () {
                $('.video-check1').hide();
                $('.tip-view-tit-video1').hide();
                $('.video-check2').show();
                $('.tip-view-tit-video2').show();
              })
              $('.infor-close-icon').click(function () {
                _this.map.closeInfoWindow();
              })
              $(".qp-icon").click(function () {
                _this.videoShow = true;
              })
            })
          } else {
            $('.videoIcon').click(function () {
              $('.video-check1').hide();
              $('.tip-view-tit-video1').hide();
              $('.video-check2').show();
              $('.tip-view-tit-video2').show();
            })
            $('.infor-close-icon').click(function () {
              console.log('点击了')
              _this.map.closeInfoWindow();
            })
            $(".qp-icon").click(function () {
              _this.videoShow = true;
            })
          }
          };
        };
        // marker添加点击事件
        this.nowMarker[this.carInfo[n].id].addEventListener('click', function () {
          this.clickFun()
        });
      }

2，在自定义点击弹出inforwindow的地方这么做

// 显示inforWindow
    showInfor(row) {
//获取map的marker列表
      let markerList = this.map.getOverlays();
      this.selectedId=row.id;
      for(let i=0;i<markerList.length;i++){
          if(row.id==markerList[i].id){
//判断相对应的marker,执行之前自定义的点击事件clickFun()
            markerList[i].clickFun()
          }
         }
    },