如何在传单弹出 HTML 中调用 Javascript 函数

Question

当您单击传单地图上的标记时，我想要做的是弹出一个框。在这个弹出框中有五个元素。

1. 标题
2. 说明
3. 图片
4. 按钮（下一张图片）
5. 按钮（上一张图片）

所以我试图做的是为每个功能添加一个自定义弹出：

    onEachFeature: function(feature, layer) {
  layer.bindPopup(insertDataPopUp(feature), customPopUpOptions);
}

但是在我的弹出设置中，当我在 HTML 中调用 onclick 函数时，无法识别该函数。因此，如果有人单击下一个图像按钮，则会显示新图像，我正在尝试做什么。但是现在的问题是没有找到HTML中的函数......

这是问题所在弹出窗口的代码：

function insertDataPopUp(feature) {
        if (feature.properties.pictures != null) {
          var picturePath = feature.properties.pictures[0];
          var picture = "<img id='popupFoto' src=" + picturePath + " alt=''/>";
        } else {
          picture = "";
        }
        var customPopup =
          "<div id='infoBox'><h2>" +
          feature.properties.name +
          "</h2><p>" +
          feature.properties.description +
          "</p>" +
          picture +
          '<button onclick="nextFoto()">Back</button> <button onclick="nextFoto()">Forward</button></div>';

        return customPopup;
      }

我正在使用传单、javascript 和 vue 框架。

Answer 1

我通过使用 DOM 元素解决了这个问题。答案可以在这里找到：

Adding buttons inside Leaflet popup