切换 Mapbox GL 控件的可见性

Question

我有一个 React 应用程序，其中包含一个容器内的 Mapbox GL 地图实例，我允许我的用户调整其宽度和高度。在该地图上，我调用了addControl() 以添加NavigationControl。

有没有办法根据我的容器的宽度/高度来切换 NavigationControl 的可见性（作为道具传递给容器），就像我可以更改 visibility 的一样通过调用 [setLayoutProperty(https://www.mapbox.com/mapbox-gl-js/api#map#setlayoutproperty)]?

我考虑过添加和删除控件，但根据文档，addControl() 的返回值是地图本身，我看不到任何可以访问当前正在显示的控件的地方。

Answer 1

最直接的选择就是操作 DOM。

$('#map .mapbox-ctrl-top-right button').hide()

如果您想自动响应页面大小调整，请使用 CSS：

@media only screen and (max-width: 600px)  {
    #map .mapbox-ctrl-top-right button {
       display: none;
    }
}