显示/隐藏从功能中提取的标记

时间:2016-02-01 18:14:09

标签: javascript jquery css leaflet

我正在使用传单,并希望显示/隐藏从此功能中提取的标记:

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类,因此从该函数中提取的所有标记都将具有该css类,因此我可以使用javascript / css打开/关闭它们。

创意#2:添加一种切换功能结果的方法&#34;开/关&#34;在一个按钮。

创意#3:将功能结果放在传单层中,并使用按钮打开/关闭该图层。

创意#4:在标记属性中添加一个属性,可以在使用该函数时使用按钮进行过滤。

请在回答之前看看我的代码:

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

1 个答案:

答案 0 :(得分:1)

所以这就是我为标记添加一个类的方法。

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

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

不要忘记在代码中包含jquery以使其正常工作

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