如何在传单弹出 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 元素解决了这个问题。答案可以在这里找到：在 Leaflet 弹出窗口中添加按钮