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

【问题标题】：MapBox: Show / Hide Markers using Toggle ListMapBox：使用切换列表显示/隐藏标记
【发布时间】：2021-04-07 07:16:53
【问题描述】：

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

目前，我有一个 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);
}

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

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

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

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

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

谢谢！

【问题讨论】：

标签： javascript mapbox mapbox-gl-js mapbox-marker

【解决方案1】：

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

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

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

【讨论】：