使用自己的按钮隐藏/显示Leaflet中的layerGroups

我有一张带有几个标记的传单地图。 我已将这些标记放在“图层组”中，以便能够显示和隐藏标记类别。 这些是我的标记：

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：

我想这可能与removeLayer或类似的东西，但我只是不知道如何让它工作（显示和隐藏餐厅，运动和景点层）。 因此，当我点击标题中的图标并且第二次单击时它们消失时，我想要表明我的图层是可见的。 非常感谢！

Answer 1

首先，您需要每个图层的链接

 
 
restaurants
 
sport
 
sights
  

然后，对于每个链接，您可以编写这样的处理程序（使用jQuery的示例）

 $("#restaurants").click(function(event) { event.preventDefault(); if(map.hasLayer(restaurants)) { $(this).removeClass('selected'); map.removeLayer(restaurants); } else { map.addLayer(restaurants); $(this).addClass('selected'); } }); 

你在这里有一个例子http://jsfiddle.net/FranceImage/c5Yfb/

Answer 2

首先，您需要三个按钮（餐厅，运动和景点）的类名。 然后在Javscript中添加：`

这是你想要使用的setFilter -function ，这是一个很好的例子Mpabox - Filtering Markers 。

来自@FranceImage的解决方案也应该可以正常工作。