天地图api添加marker自定义弹框点击事件踩坑

最近做地图的功能为了偷懒，直接用了天地图官方的api来添加地图marker还有自定义弹框内容。

出现的问题是，我通过创建监听来控制marker弹框，当第一次打开，或者点击×关掉弹窗再打开时都能正常触发，但是如果没有点击×，直接点其他点位切换弹框，点击事件就不能正常触发。

此处问题原因及解决方案如下：

 在自定义的内容里边添加了一个<查看详情>按钮，

弹窗样式如下：

 let winHtml =
          `<div style="width:270px"><div style="height:3px;width:100%;background:#129939;position:absolute;top:0;right:0;"></div>` +
          `<div style="display:flex"><span style="width:70px;text-align:right;white-space: nowrap;color:#333333;font-size:14px;font-family:PingFang SC-Medium,PingFang SC;line-height: 24px;">单位名称：</span><span style="line-height: 24px;font-size:14px">${item.orgName}<span></div>` +
          `<div style="display:flex"><span style="width:70px;text-align:right;white-space: nowrap;color:#333333;font-size:14px;font-family:PingFang SC-Medium,PingFang SC;line-height: 24px;">单位地址：</span><span style="line-height: 24px;font-size:14px">${item.orgAddress}<span></div>` +
          `<div style="display:flex"><span style="width:70px;text-align:right;white-space: nowrap;color:#333333;font-size:14px;font-family:PingFang SC-Medium,PingFang SC;line-height: 24px;">坐标：</span><span style="line-height: 24px;font-size:14px">${item.longitude}, ${item.latitude} <span></div>` +
          `<br/><button class="numberInfoBtn" onClick=\"\" style="height:40px;width:100px;background-image:linear-gradient(273deg, #129939 0%, #49C56B 100%);color:#fff;font-weight:400;border:0;border-radius:22px;">查看详情</button></div>`;

然后我们要将将marker与winHtml绑定

let marker = new T.Marker(lnglat, { icon: icon });
let markerInfoWin = new T.InfoWindow(winHtml, { autoPan: true });

注册点击事件，此处我用的getElementsByClassName，因为dom在创建时会同时创建多个，但是dom的id必须是唯一的

需要注意的是，getElementsByClassName返回的是数组格式。这个地方天地图的api，如果没有将marker点X关掉，在切换点位的maker弹框时并不会把上一个marker去掉，而是上一个的弹框隐藏，和新弹出来的一起存在两个dom，此时需要判断来拿到新弹出的dom元素。

 marker.addEventListener('click', () => {
          this_.currentOrgInfo = item;
          marker.openInfoWindow(markerInfoWin);
          this_.isShowMarkerInfo = true;
          console.log('添加监听', item);
          //此处巨坑，天地图api每个marker如果没有点击右上角X关掉，点击下一个marker时，地图上是存在两个html需要进行判断
          let index = 0;
          if (document.getElementsByClassName("numberInfoBtn").length == 1) {
            index = 0;
          } else if (document.getElementsByClassName("numberInfoBtn").length == 2) {
            index = 1;
          }
          document
            .getElementsByClassName("numberInfoBtn")
            [index].addEventListener('click', () => {
              this_.showNumberInfo();
            });
        });
        //地图上添加标注点
        this.map.addOverLay(marker);

上述代码块中的item是循环遍历点位集合时，每个点位的信息。详情页需要传递的信息可通过在data定义当前点击的item变量来传递信息。