首页 / 浏览问题 / WebGIS / 问题详情
弹窗内的点击事件不起作用
22EXP 2023年06月28日
this.map.on("click", aa + "单个点", () => {

                  let aa = [asd[0], asd[1]];

                  var popUps = document.getElementsByClassName(

                    "mapboxgl-popup-content"

                  );

                  var poptip =

                    document.getElementsByClassName("mapboxgl-popup-tip");

                  if (popUps[0]) {

                    popUps[0].remove();

                  }

                  if (poptip[0]) {

                    poptip[0].remove();

                  }

                  let result = this.options.find(

                    (v) => v.value == this.form.tcyw

                  );

                  //关闭弹框

                  this.countyPopupDiv = `<div id="trackPopUp" style="width: 250px;"><div>

         <i class="el-icon-location-information"></i>

         ${result.label}

        </div>

        <div style="border-bottom: 1px solid #6c5d5d;width: 100%;margin-top: 8px;"></div>

        <div style="display:flex;justify-content: flex-start; font-size: 12px;

              line-height: 30px;

              white-space: normal;">

          <div>${result.label}名称&nbsp;:&nbsp;</div>

          <div>${zx.properties.NAME}</div>

        </div>

        <div style="display:flex;justify-content: flex-start; font-size: 12px;line-height: 30px; white-space: normal;">

          <div>${result.label}编号&nbsp;:&nbsp;</div>

          <div>${

            zx.properties.ROADCODE == undefined

              ? zx.properties.NAME_1 == undefined

                ? zx.properties.SMAREA

                : zx.properties.NAME_1

              : zx.properties.ROADCODE

          }</div>

        </div>

        <div style="display:flex;justify-content: flex-start; font-size: 12px;line-height: 30px; white-space: normal;">

          <div>${result.label}简称&nbsp;:&nbsp;</div>

          <div>${

            zx.properties.ROADNAME == undefined

              ? zx.properties.JOINID == undefined

                ? zx.properties.SMPERIMETER

                : zx.properties.JOINID

              : zx.properties.ROADNAME

          }</div>

        </div>

         <a id="getdeatilOne" href="#" style="font-size:15px;line-height:30px;white-space:normal;">点击详情</a>

        </div>`;

                  $("#getdeatilOne").click(() => {

                    console.log("1233333");

                    // let id ="BM00145668"

                    // let routeUrl = this.$router.resolve({

                    //   path: `http://maintain.cccc-am.com/webui/dci.html#/businessView/business?bimid=${id}&btmid=BTMDBNfL1dZs9wNzmLe&router=%2FnewView%2Fjcsj%2Flx&title=%E8%B7%AF%E7%BA%BF`, // 这里的路径就可以正常的写,不需要添加_blank: true

                    // });

                    //   window.open(routeUrl.href, "_blank");

                  });

                  let _this = this;

                  _this.countyPopup = new mapboxgl.Popup({ maxWidth: "540px" })

                    .setLngLat(aa)

                    .setHTML(_this.countyPopupDiv)

                    .addTo(map);

                });

              });

1个回答

您好,1、请问使用的是iclient for mapbox吗?使用的版本是多少?

2、弹窗点击事件是否绑定到对应图层或者要素上?可以添加断点看看是哪一步代码未生效。
1,850EXP 2023年06月28日
是,一点多,是绑定在气泡弹窗上面,加了,但是没有报错也找不到为啥
绑定在气泡弹窗上面的事件,是否获取到对应的要素,可以添加断点进行排查。
...