Question

我有一张地图，其中包含许多从此功能中提取的标记：

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

Answer 1

这样做的一个简单方法是

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) or map.removeLayer(layerGroup) as needed.，例如map.removeLayer(myLayerHash["Animals"]["Shigi"])

Answer 2

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

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

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

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

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

2 个答案: