如何在传单绘制中将按钮附加到弹出窗口中？

Question

我希望弹出窗口内的按钮对弹出附加层进行一些操作。

 L.marker(coors[i], { icon })

          .addTo(this.drawnItem)

          .bindPopup(this._getCustomIcon(mix))

          .openPopup();

在我的 _getCustomIcon() 下面

 _getCustomIcon = value => {

    let delLayer = document.createElement("BUTTON");

    delLayer.innerHTML = "Delete";

    let CustomPopup = L.popup({ className: "customPopup" }).setContent(

      `<p> ${value}</p> ${delLayer}` //here is error

    );

    return CustomPopup;

  };

Answer 1

只需使用此代码&nbsp;_getCustomIcon = value => {&nbsp; &nbsp; let delLayer = document.createElement("BUTTON");&nbsp; &nbsp; delLayer.innerHTML = "Delete";&nbsp; &nbsp; return delLayer;&nbsp; };你的错误是在使用后创建一个弹出窗口，bindPopup它已经创建了弹出窗口！

Answer 2

这delLayer是一个对象，但不是一个普通的字符串。.outerHTML当您在字符串模板文字中连接时，您应该使用将元素对象转换为字符串_getCustomIcon = value => {&nbsp; &nbsp; let delLayer = document.createElement("BUTTON");&nbsp; &nbsp; delLayer.innerHTML = "Delete";&nbsp; &nbsp; let CustomPopup = `<p> ${value}</p> ${delLayer.outerHTML}`;&nbsp; &nbsp; return CustomPopup;};或者，您可以尝试使用 concatenate 作为普通字符串，如let delLayer = '<button>Delete</button>'let CustomPopup = `<p> ${value}</p> ${delLayer}`;

Answer 3

您正在将字符串与对象混合，请尝试&nbsp;<p> ${value}</p> <button>Delete</button>