2

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

 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;
  };
4

3 回答 3

3

只需使用此代码

 _getCustomIcon = value => {
    let delLayer = document.createElement("BUTTON");
    delLayer.innerHTML = "Delete";
    return delLayer;
  };

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

于 2019-09-18T11:56:25.380 回答
1

这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}`;
于 2019-09-18T11:47:13.183 回答
0

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

于 2019-09-18T11:46:39.343 回答