如何擴展 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';
}