Javascript 映射框：使用切换列表显示/隐藏标记

我试图研究如何基于动态切换列表显示/隐藏地图框标记

目前，我有一个MapBox地图，我可以用这段代码成功地添加一堆标记

for (var i = 0; i < markers.length; i++) {
    var la = markers[i]['lat'];
    var lo = markers[i]['long'];
    var siteName = markers[i]['Site Name']
    var siteType = markers[i]['Site Type']
    var siteAddr = markers[i]['Address']
    var colour = markers[i]["Colour"];

    new mapboxgl.Marker({
    "color":colour
    })
    .setLngLat([lo,la])
    .setPopup(new mapboxgl.Popup()
    .setHTML("<b>" + siteName + "</b><br>(" + siteType + ")<br>" + siteAddr )).addTo(map);
}

for（变量i=0；i（“+siteType+”
“+siteAddr））.addTo（地图）；
}

这一切都很好，我得到了一张漂亮的地图

然后我从这个例子中得到了灵感，并尝试根据站点类型显示/隐藏标记，如图所示；

我遇到的问题是，该示例基于使用图层，而我的地图使用标记

我一直在尝试各种各样的东西，但最终我甚至不确定应该采用什么策略，更不用说支持它所需的代码了

是否可以使用切换列表显示/隐藏标记，或者我必须使用图层来实现这一点？如果可能，怎么做？对于图层，您如何自定义各个位置，以便它们可以有单独的弹出窗口？我不是在找某人填鸭式地给我写代码（尽管我不会说不！），我主要是在找一个关于我可以采取的策略以实现我的目标的建议/讨论

---

谢谢

标记和层的行为完全不同

使用层，可以将层作为一个整体进行管理。可以通过切换图层的可见性来隐藏/显示图层，也可以通过修改过滤器来隐藏/显示单个图元

使用标记，可以单独管理每个标记。您可以使用CSS隐藏/显示标记（例如，将其

opacity

更改为0），但更多情况下，您只需使用

marker.remove（）

删除标记，然后再添加它