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

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

只需使用此代码

 _getCustomIcon = value => {

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

    delLayer.innerHTML = "Delete";

    return delLayer;

  };

你的错误是在使用后创建一个弹出窗口，bindPopup它已经创建了弹出窗口！

Answer 2

这delLayer是一个对象，但不是一个普通的字符串。.outerHTML当您在字符串模板文字中连接时，您应该使用将元素对象转换为字符串

_getCustomIcon = value => {

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

    delLayer.innerHTML = "Delete";

    let CustomPopup = `<p> ${value}</p> ${delLayer.outerHTML}`;

    return CustomPopup;

};

或者，您可以尝试使用 concatenate 作为普通字符串，如

let delLayer = '<button>Delete</button>'

let CustomPopup = `<p> ${value}</p> ${delLayer}`;

Answer 3

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