javascript - 使用复选框显示/隐藏标记传单

Question

我的 map 中有一些标记，有时是不必要的，我想实现一个显示/隐藏它们的复选框 Controller 。简而言之，我正在尝试向此标记添加一个类。

我有一个函数可以创建标记并将其添加到 map 中。

function gateways_markersMap(gateways){
    for (var i = 0; i < gateways.length; i++){
        coo = [gateways[i].gat_lat,gateways[i].gat_lon];

        popUp = "Nombre: " + String(gateways[i].gat_name) + "<br>Id: " + gateways[i].gat_id;

        var iconMarker = new L.Icon({
            iconUrl: '/static/img/markers/yes_fixed-markers/gateway.png',
            iconSize: [35, 35],
            iconAnchor: [12, 41],
            popupAnchor: [1, -34]
        });

        var marker = L.marker(coo, {icon: iconMarker}).bindPopup(popUp);
        $(marker).addClass('prueba'); // HERE I'M TRYING ADD CLASS
        layerGroup.addLayer(marker);
        map.addLayer(layerGroup);
    }
}

在我的代码的其他部分，我有一个控制复选框行为的函数，

function checkboxController(){
    $("#cleanGatewFilter").on('click', function(){
        if ($('#cleanGatewFilter').is(':checked')) {
            $('#allGatewFilter').prop("checked", false);

            $('.prueba').hide() //HERE I WANT TO HIDE THE MARKERS
        }
    });
}

但是什么也没发生。

我该怎么做？是否可以向标记添加一个类，然后使用复选框显示/隐藏它们？

非常感谢!

Answer 1

您可以将标记添加到要素组以显示标记，也可以从 map 中删除该组以隐藏标记。

var fg = L.featureGroup();
function gateways_markersMap(gateways){
    for (var i = 0; i < gateways.length; i++){
        coo = [gateways[i].gat_lat,gateways[i].gat_lon];

        popUp = "Nombre: " + String(gateways[i].gat_name) + "<br>Id: " + gateways[i].gat_id;

        var iconMarker = new L.Icon({
            iconUrl: '/static/img/markers/yes_fixed-markers/gateway.png',
            iconSize: [35, 35],
            iconAnchor: [12, 41],
            popupAnchor: [1, -34]
        });

        var marker = L.marker(coo, {icon: iconMarker}).bindPopup(popUp);
        marker.addTo(fg);
    }
    //Add the featuregroup and the layergroup outside of the loop to the map
    layerGroup.addLayer(fg);
    map.addLayer(layerGroup);
}

function checkboxController(){
    $("#cleanGatewFilter").on('click', function(){
        if ($('#cleanGatewFilter').is(':checked')) {
            $('#allGatewFilter').prop("checked", false);
            layerGroup.removeLayer(fg); //hide
        }else{
            layerGroup.addLayer(fg); //show
        }
    });
}