如何扩展 Leaflet 图标 Class 为标记 HTML 添加 data-open 属性？

Question

我正在尝试根据在 Leaflet 中的 GeoJSON 层上单击标记来触发某些功能。我尝试实现的最终功能是一个浮出控件，或从单个功能的 JSON 属性填充的滚动类型模态。 本质上，我正在尝试使用基于标记单击的动态功能内容来实现此Tutsplus 教程中的功能。

我想我已经弄清楚了我需要的大部分内容，但我正在努力解决如何向单个标记添加数据属性，特别是data-open的问题。 基于我之前的一个问题，我意识到仅仅更新 DOM 元素的 CSS 是不够的，我的应用程序应该根据数据属性实施更改以完全获得我想要的功能。

从这个问题我知道这应该通过扩展 Leaflet 提供的L.Icon class 来完成，但答案对于我目前的 JS 技能来说有点太简洁了。 我很抱歉这实际上是一个先前提出的问题的“ELI5”，但我不确定options和slug进入 function 的位置。我认为它们是由问题暗示的，而不是我引用的答案和被设置在标记本身上。

这是我的标记上点击处理程序的简化版本，它抓取并缩放到位置，获取要素信息，并将该信息填充到 div。 缩放功能有效，提取和放置特征信息也是如此，但我正在努力解决如何连接功能以触发模式并将具有特征信息的 div 放置在 map 上。

function zoomToFeature(e) {
  var latLngs = [e.target.getLatLng()];
  var markerBounds = L.latLngBounds(latLngs);
  var street = e.target.feature.properties.str_addr;
  document.getElementById('street').textContent = street;
  mymap.fitBounds(markerBounds);
  //where the modal trigger should be
  document.getElementById('infoBox').classList.add('is-visible');
}

以下是从链接教程中获取的事件侦听器，目前未触发，但我让它们在独立实现中工作：

const openEls = document.querySelectorAll("[data-open]");
const closeEls = document.querySelectorAll("[data-close]");
const isVisible = "is-visible";
//this is the event I want to trigger on marker click
for (const el of openEls) {
  el.addEventListener("click", function() {
    const modalId = this.dataset.open;
    console.log(this);
    document.getElementById(modalId).classList.add(isVisible);
  });
}
for (const el of closeEls) {
  el.addEventListener("click", function() {
 this.parentElement.parentElement.parentElement.classList.remove(isVisible);
  });
}
document.addEventListener("click", e => {
  if (e.target == document.querySelector(".modal.is-visible")) {
    document.querySelector(".modal.is-visible").classList.remove(isVisible);
  }
});

所以，我想要得到的是，当我的标记被点击时，触发模态出现在 map 上。所以，我想我没有将标记点击事件与触发模态的事件连接起来。 我认为缺少的是将data属性添加到标记，或者以某种方式链接没有数据属性的事件。 由于没有直接的方法向标记添加属性，我尝试在我的圆形标记上添加 slug 选项：

var circleMarkerOptions = {
    radius: 2,
    weight: 1,
    opacity: 1,
    fillOpacity: 0.8,
    slug: 'open',
}

如果我正确阅读了先前提出的问题的答案，那么以这种方式扩展图标 Class 应该添加一个data-open属性。

L.Icon.DataMarkup = L.Icon.extend({

    _setIconStyles: function(img, name) {
        L.Icon.prototype._setIconStyles.call(this, img, name);

        if (options.slug) {
            img.dataset.slug = options.slug;
        }
    }

});

我的代码的精简版本在这里（感谢@ghybs）。 我的完整实现从 PostGIS 表中提取标记。 在 Plunker 中很难看到，但这段代码将我的 class 添加到我的模式中，但不会触发该功能。 如果将 class 手动更新为modal.is-visible ，它确实会触发可见性，但呈现modal is-visbile不会，我认为这是因为 CSS 是在页面加载时解释的（？）而不是在通过开发工具响应更新，而串联的 css class 完全匹配（？）。 当我确实通过开发工具触发模态时，关闭模态侦听器似乎不起作用，所以我也遗漏了那块拼图。

Answer 1

所以，这是设置数据属性的一种变通方法，但我意识到我是在用鞋拔一个不需要的解决方案。 假设有人最终遇到了同样的心理障碍。 模式关闭按钮上的适当侦听器和传递给现有标记单击侦听器的另一个 function 会产生所需的功能。

const closeM = document.querySelector(".close-modal");
closeM.addEventListener("click", closeMe);
var modal = document.getElementById('infoBox');

和

function modalAction(){
    modal.style.display = 'block';
}
function closeMe(){
    modal.style.display = 'none';
}