如何扩展 Leaflet Icon Class 以将 data-open 属性添加到标记 HTML？答案

【问题标题】：How to extend Leaflet Icon Class to add data-open attribute to marker HTML?如何扩展 Leaflet Icon Class 以将 data-open 属性添加到标记 HTML？
【发布时间】：2022-02-10 03:57:44
【问题描述】：

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

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

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

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

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

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

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

如果我正确阅读了之前提出的问题的答案，那么以这种方式扩展图标类应该添加一个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;
        }
    }

});

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

【问题讨论】：

您的代码链接似乎与损坏的配置相关联。将 URL 共享给 Plunkr 而不仅仅是它的预览可能会有所帮助。无论如何，最好也直接在您的问题中发布您的代码要点。
详细阐述了我的代码、所需的功能以及我认为我正在使用的逻辑。

标签： javascript leaflet dom-events custom-data-attribute

【解决方案1】：

因此，设置 data 属性是一种变通方法，但我意识到我正在硬装一个不需要它的解决方案。假设某人最终有同样的心理障碍。模式关闭按钮上的适当侦听器和传递给现有标记单击侦听器的另一个函数会产生所需的功能。

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

【讨论】：