"如何使用 Leaflet JS 在標記單擊時向 HTML 元素添加類"

Question

因此，我試圖在單擊標記作為我的傳單應用程序的一部分時顯示模式。 我已經在我的標記層上設置了一些點擊功能，但我似乎未能觸發將必要的類添加到模態元素中。

目前，我在地圖 div 之外有一個帶有以下 HTML 的模態 div：

<div class="modal" id="infoBox">
<div class="modal-dialog">
<header class="modal-header"><button class="close-modal" aria-label="close modal" data-close> X</button></header>
<p>
<section class="modal-content">
Address: <span id="street"></span><br/>
Neighborhood: <span id="suburb"></span><br/>   
City: <span id="city"></span><br/>
Piece Type: <span id="type"></span><br/>
Description: <span id="desc"></span><br/>
</p>
</section>
<footer class="modal-footer"></footer>
</div>    
</div>

我正在嘗試使用以下功能添加類：

function zoomToFeature(e) {
  var latLngs = [e.target.getLatLng()];
  var markerBounds = L.latLngBounds(latLngs);
  var street = e.target.feature.properties.str_addr;
  var city = e.target.feature.properties.city;
  var desc = e.target.feature.properties.desc;
  document.getElementById('street').textContent = street;
  document.getElementById('city').textContent = city;
  document.getElementById('desc').textContent = desc;
  mymap.fitBounds(markerBounds);
  mymap.fitBounds(e.target.getBounds());
  document.getElementById('infoBox').classList.add('is-visible');
}

我使用 onEachFeature 函數在圖層上添加點擊偵聽器，如下所示：

function onEachFeature(feature, layer){
    layer.on({
        mouseover: highlightFeature,
        mouseout: resetHighlight,
        click: zoomToFeature,
    });
}

當我手動添加.is-visible類時，我得到了預期的行為，但單擊標記層不會添加類。 我基本上是在嘗試使用 Leaflet Chrolopleth tutorial 中的一些功能來實現這個Tutsplus教程。 點擊功能可以拉動特征信息並縮放到標記，但如上所述，模態保持隱藏狀態。

在開發控制台的獨立函數中運行 classListAdd 會添加類似class="modal is-visible"的類，但它不會觸發該功能。 如上所述，手動將類更改為modal.is-visible確實有效，但我認為這是因為它與 css 完全匹配，並且沒有被重新解釋。

可以在這里看到精簡的演示版本

Answer 1

罪魁禍首是這行： e.target.getBounds()<\/code>

當您單擊（圓形）標記時， e.target<\/code>就是該標記。 但是點特征沒有這樣的getBounds()<\/code>方法（因為它們代表一個點，而不是一個區域）。

因此，您的腳本失敗並出現如下錯誤：

未捕獲的類型錯誤：e.target.getBounds 不是函數

...並且事件偵聽器的其余部分未執行，特別是您顯示模態的以下行（ document.getElementById('infoBox').classList.add('is-visible')<\/code> ）

由於您已經在之前（ mymap.fitBounds(markerBounds)<\/code> ）之前設置了該標記周圍的視圖，因此不需要重復調​​用（可能只是先前嘗試的剩余部分？）

刪除該行會恢復您的模態行為。

固定 Plunkr： https<\/a> :\/\/plnkr.co\/edit\/DfCKrJaNzM48dzuZ

注意：您的 Plunkr 無法正常工作，因為您忘記了對initMap()<\/code>函數的調用。