mapbox：仅显示1组标记

Question

好的，所以我有一张包含三组标记（红色，黄色和绿色）的地图。现在，我想添加一个过滤器选项，您可以在其中选择显示红色，黄色或绿色的一个或全部。

这是我的HTML代码：

<div class="filter">
    <label class="container">Show all
    <input type="radio" name="radio" checked="checked" onClick="showAll()">
    <span class="checkmark"></span>
    </label>

    <label class="container">Legit companies
    <input type="radio" name="radio" onClick="filterGreen()">
    <span class="checkmark"></span>
    </label>

    <label class="container">Doubtfull companies
    <input type="radio" name="radio" onClick="filterYellow()">
    <span class="checkmark"></span>
    </label>

    <label class="container">Fraudulant companies
    <input type="radio" name="radio" onClick="filterRed()">
    <span class="checkmark"></span>
    </label>
</div>

然后我有一些Javascript代码：

var geojson = {
    type: 'FeatureCollection',
    features: [{
        type: 'Feature',
        geometry: {
            type: 'Point',
            coordinates: [4.616570, 51.875200]
        },
        properties: {
            title: 'Falco Lines B.V.',
            address: 'Ridderpoort 9, Ridderkerk',
            score: 5
        }
    },
    {
        type: 'Feature',
        geometry: {
            type: 'Point',
            coordinates: [5.795830, 53.197960]
        },
        properties: {
            title: 'Distr. en Container Centr. BV',
            address: 'Willemskade 1, Leeuwarden',
            score: 99
        }
    }]
};

// add markers to map
geojson.features.forEach(function(marker) {
    // create a HTML element for each feature
    var el = document.createElement('div');
        if (marker.properties.score <= 30) {el.className = 'marker-low';} 
        else if (marker.properties.score <= 70) {el.className = 'marker-medium';}
        else if (marker.properties.score <= 100) {el.className = 'marker-high';}
        else {el.className = 'marker';}


    // make a marker for each feature and add to the map
    new mapboxgl.Marker(el)
    .setLngLat(marker.geometry.coordinates)
    .setPopup(new mapboxgl.Popup({ offset: 20 }) // add popups
    .setHTML('<h3>' + marker.properties.title + '</h3><p>' + marker.properties.address + '</p><span style="cursor:pointer" onclick="openNav()"><u>Meer info</u></a></span>'))
    .addTo(map);
});

// filter
function filterRed() {
    if (div.classList.contains('marker-low')) {div.style.visibility = 'hidden';} 
    else if (div.classList.contains('marker-medium')) {div.style.visibility = 'hidden';} 
    else if (div.classList.contains('marker-high')) {div.style.visibility = 'visible';}
}

function filterYellow() {
    if (div.classList.contains('marker-low')) {div.style.visibility = 'hidden';} 
    else if (div.classList.contains('marker-high')) {div.style.visibility = 'hidden';} 
    else if (div.classList.contains('marker-medium')) {div.style.visibility = 'visible';}
}

function filterGreen() {
    if (div.classList.contains('marker-medium')) {div.style.visibility = 'hidden';} 
    else if (div.classList.contains('marker-high')) {div.style.visibility = 'hidden';} 
    else if (div.classList.contains('marker-low')) {div.style.visibility = 'visible';}
}

function showAll() {
    if (div.classList.contains('marker-low')) {div.style.visibility = 'visible';}
    else if (div.classList.contains('marker-medium')) {div.style.visibility = 'visible';}
    else if (div.classList.contains('marker-high')) {div.style.visibility = 'visible';}
    else {div.style.visibility = 'hidden'}
}

因此，显然有问题，因为这些复选框根本无法使用，但是由于我对JS不太满意，所以我似乎无法弄清楚为什么。请帮忙！