如何使用 js 显示/隐藏函数内的标记

How to show/hide markers that are inside a function using js?

本文关键字：函数 隐藏 何使用 js 显示      更新时间：2023-09-26

我有一个地图，上面有很多从这个函数中提取的标记：

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);
            }
        }
    }
}

然后，我使用代码showResourcesByName("AITokarServer");显示该选择器（AITokarServer）的所有标记。

我有一个包含所有类别的侧边栏，如果我单击该类别，我想显示/隐藏标记。例如，如果我单击动物，我只想显示"动物"组中的标记。我还想在每个标记组上放置一个显示/隐藏选择器，如果我单击"Shigi"链接，我只想显示从此功能中提取的 Shigi 标记：showResourcesByName("AIShigiServer");

我在这里尝试了这个例子：http://plnkr.co/edit/LVzmRcsVZ79wZ78E5yBd?p=preview但是我不知道如何使用我使用的函数和那些要显示/隐藏的选择器。

这是我包含所有文件的完整代码。每个组都在代码中注释，其中是拉取图标的函数。

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

一个简单的方法是

1.将每个类别的功能放入L.layerGroup（L.marker(params).addTo(someLayerGroup)），然后将其存储在可以根据您的喜好嵌套的JS哈希中。

var myLayerHash = {};
myLayerHash["Animals"] = {};

当您遍历每个最低级别的类别时...

myLayerHash["Animals"][thisCategory] = someLayerGroup;
someLayerGroup.addTo(map) //if they default to being visible

然后，您只需在用户输入的指导下完成哈希，并根据需要使用map.addLayer（layerGroup）或map.removeLayer（layerGroup），就像map.removeLayer(myLayerHash["Animals"]["Shigi"])

我能够使用这个达到我想要的：

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

这样，我可以向标记添加一个类，更好的是，将该类设置为以前的变量以匹配标记属性。

相关文章：