react map-gl <Map>在调整窗口大小之前不是全屏的。

Question

我使用的离子框架与React，并试图显示地图通过mapbox和react gl。

它正在工作，但地图只有100 or *100 or左右，直到我调整页面的大小。我已经将宽度和高度css属性分别设置为100 so和100 so，如下所示：

  <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()中调用onRender()来解决这个问题。试试这个：

<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实例，它有一个可以调用的调整尺寸函数。

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