Show/Hide 从函数中提取的标记

Question

我正在使用 leaflet 并想要 show/hide 从这个函数中提取的标记：

function showResourcesByName(name) {
    for (var i = 0; i < markers.resources.length; i++) {
        var resName = markers.resources[i].name;

        if (resName == name) {
            var resIcon = icons.resources[i].icon;
            var resSize = icons.resources[i].size;
            var resPname = icons.resources[i].pname;

            var customIcon = L.icon({
                iconUrl: resIcon,
                iconSize: resSize, // size of the icon
                iconAnchor:   [resSize[0]/2, resSize[1]/2], // point of the icon which will correspond to marker's location
                popupAnchor:  [2, -resSize[1]/2] // point from which the popup should open relative to the iconAnchor
            });

            for (var j = 0; j < markers.resources[i].coords.length; j++) {
                var x = markers.resources[i].coords[j].x;
                var y = markers.resources[i].coords[j].y;

                L.marker([y, x], {icon: customIcon}).addTo(map).bindPopup(resPname);
            }
        }
    }
}

从 json 文件输出标记。显示我使用的标记： showResourcesByName("NameOfTheMarkersHere")

我对如何做到这一点有一些想法，但我不知道如何让它发挥作用。

想法 #1：将 css class 添加到函数结果中，因此从该函数中提取的所有标记都将具有 css class，这样我就可以使用 javascript/css.

切换它们 on/off

想法 #2：添加一种在按钮中切换函数结果 "on/off" 的方法。

想法 #3：将函数结果放入传单层并使用按钮切换该层 on/off。

想法 #4：在标记属性中添加一个属性，可以在使用该功能时使用按钮进行过滤。

请在回答之前先看看我的代码：

http://plnkr.co/edit/dVgHt4VK0DnA30M3a8vq?p=preview

Answer 1

这就是我向标记添加 class 的方式。

marker = L.marker([y, x], {icon:customIcon}).addTo(map).bindPopup(resPname);

$(marker._icon).addClass('randomClass');

不要忘记在您的代码中包含 jquery 才能正常工作

这是我的工作柱塞 http://plnkr.co/edit/jVyvnNNvIzJqEn7Hm7S6?p=preview

Show/Hide 从函数中提取的标记

Show/Hide Markers that are pulled from function

javascript

css

jquery

leaflet