MapBox：使用切换列表显示/隐藏标记

问题描述

我正在尝试了解如何基于动态切换列表显示/隐藏 MapBox 标记。

目前，我有一个 MapBox 地图，我可以用这段代码成功地向它添加一堆 Markers；

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

一切正常，我得到了一张漂亮的地图。

然后我从这个例子中获得灵感，并尝试根据 siteType 显示/隐藏标记，就像这里显示的那样； https://docs.mapbox.com/mapbox-gl-js/example/filter-markers/

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

我一直在尝试各种事情，但最终我什至不确定要采用什么策略，更不用说支持它所需的代码了。

是否可以使用切换列表显示/隐藏标记，还是我必须使用图层来实现这一点？如果可以，怎么做？以及如何使用图层自定义各个位置，以便它们可以有单独的弹出窗口？我不是在追求有人用勺子喂我代码（尽管我不会拒绝！），主要是我在寻求关于我可以采用的策略来实现我的目标的建议/讨论。

谢谢！

解决方法

标记和图层的行为完全不同。

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

使用标记，您可以单独管理每个标记。您可以使用 CSS 隐藏/显示标记（例如，将其 opacity 更改为 0），但更多情况下，您只需使用 Marker.remove() 删除标记并稍后再添加。