"如何使用 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>函数的调用。