如何在传单弹出 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 元素修复了这个问题。