我有一张带有几个标记的传单地图.我已将这些标记放在“图层组”中,以便能够显示和隐藏标记类别.
这些是我的标记：
这些是我的标记：
var aa = L.marker([48.185556,11.620278]).bindPopup('AA'),bb = L.marker([48.152222,11.592778]).bindPopup('BB'),cc = L.marker([48.161209,11.597989]).bindPopup('CC'),dd = L.marker([48.14350,11.58775]).bindPopup('DD'),ee = L.marker([48.14989,11.59094]).bindPopup('EE'),ff = L.marker([48.15958,11.60608]).bindPopup('FF');
var restaurants = L.layerGroup([aa,bb]);
var sport = L.layerGroup([cc,dd]);
var sights = L.layerGroup([ee,ff]);
当我使用图层控件和overlayMaps时,这非常有效：
var overlayMaps = {
"Restaurants": restaurants,"Sport": sport,"Sights": sights
};
L.control.layers(overlayMaps).addTo(map);
但现在我希望能够使用我自己的“按钮”(图标)来完成这项工作(隐藏和显示图层组).我的HTML：
<div class="header">
<a href="#">
<span class="fontawesome-food"></span>
<span class="fontawesome-heart-empty"></span>
<span class="fontawesome-eye-open"></span>
</a>
</div>
我想这可能与removeLayer或类似的东西,但我只是不知道如何让它工作(显示和隐藏餐厅,运动和景点层).因此,当我点击标题中的图标并且第二次单击时它们消失时,我想要表明我的图层是可见的.非常感谢！
解决方法
首先,您需要每个图层的链接
<ul>
<li><a id="restaurants" href="#">restaurants</a></li>
<li><a id="sport" href="#">sport</a></li>
<li><a id="sights" href="#">sights</a></li>
</ul>
然后,对于每个链接,您可以编写这样的处理程序(使用jQuery的示例)
$("#restaurants").click(function(event) {
event.preventDefault();
if(map.hasLayer(restaurants)) {
$(this).removeClass('selected');
map.removeLayer(restaurants);
} else {
map.addLayer(restaurants);
$(this).addClass('selected');
}
});
