切换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;
    }
}