反应地图-gl<Map> 在调整窗口大小之前不是全屏的

Question

我正在使用带有 React 的 ionic 框架，并尝试通过 mapbox 和 react-map-gl 显示地图。

它正在工作，但在我调整页面大小之前，地图只有 100px * 100px 左右。 我已将宽度和高度 css 属性分别设置为 100vw 和 100vh，如下所示：

  <Map
    style={{width: '100vw', height: '100vh'}}
    initialViewState={{
      longitude: -122.4,
      latitude: 37.8,
      zoom: 14
    }}
    mapStyle="mapbox://styles/mapbox/streets-v9"
  >
    <FullscreenControl />
  </Map>

在调整页面大小之前，什么可能导致它不是 100% 的宽度和高度？

Answer 1

我遇到了同样的问题，并且能够通过在地图组件 onRender() 中调用 map.resize() 来解决它。 尝试这个：

<Map
    style={{width: '100vw', height: '100vh'}}
    initialViewState={{
        longitude: -122.4,
        latitude: 37.8,
        zoom: 14,
    }}
    mapStyle="mapbox://styles/mapbox/streets-v9"
    onRender={(event) => event.target.resize()}
>
    <FullscreenControl />         
</Map>

event是一个MapboxEvent

event.target是一个MapboxMap

MapboxMap 实际上是一个mapboxgl.Map实例，它有一个可以调用的resize函数。

请参阅 react-map-gl API 文档： https ://visgl.github.io/react-map-gl/docs/api-reference/map#onrender