如何使用 Leaflet JS 在标记单击时将 class 添加到 HTML 元素

Question

因此，作为我的 Leaflet 应用程序的一部分，我正在尝试在单击标记时显示模式。我已经在我的标记层上设置了一些点击功能，但我似乎无法触发将必要的 class 添加到模态元素。

目前我有一个模态 div，在我的地图 div 之外有以下 HTML：

<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>

我正在尝试添加具有以下功能的 class：

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 class 元素时，我得到了预期的行为，但单击标记层不会添加 class。我基本上是在尝试实现这个 Tutsplus Tutorial with some of the functionality in the Leaflet Chrolopleth tutorial。点击功能可以拉动特征信息并缩放到标记，但如上所述，模态保持隐藏状态。

运行 classListAdd 在开发控制台的独立函数中添加 class 就像 class="modal is-visible" 一样，但它不会触发该功能。如上所述，将 class 手动更改为 modal.is-visible 确实有效，但我认为这是因为它与 css 完全匹配，并且没有被重新解释。

精简演示版可以 seen here

Answer 1

罪魁祸首是行：e.target.getBounds()

当您点击一个（圆形）标记时，e.target 就是那个标记。但是点特征没有这样的 getBounds() 方法（因为它们代表一个点，而不是一个区域）。

因此您的脚本失败并出现如下错误：

Uncaught TypeError: e.target.getBounds is not a function

...并且事件侦听器的其余部分未执行，特别是显示模态的以下行 (document.getElementById('infoBox').classList.add('is-visible'))

由于您之前已经设置了围绕该标记的视图 (mymap.fitBounds(markerBounds))，因此无需重复调用（也许只是之前尝试的遗留问题？）

删除该行将恢复您的模态行为。

固定 Plunkr：https://plnkr.co/edit/DfCKrJaNzM48dzuZ

注意：您的 Plunkr 没有工作，因为您忘记了对 initMap() 函数的调用。

如何使用 Leaflet JS 在标记单击时将 class 添加到 HTML 元素

How to add class to HTML element on marker click with Leaflet JS

html

javascript

css

leaflet