reactjs - react-map-gl 在调整窗口大小之前不是全屏

Question

我将 ionic 框架与 React 结合使用，并尝试通过 mapbox 和 react-map-gl 显示 map 。

它正在工作，但 map 只有 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

我遇到了同样的问题，并且能够通过在 map 组件 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