切换地图框 GL 控件可见性

Question

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

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

我考虑过添加和删除控件，但根据文档，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;
}
}