地图画布大小MapboxGL JS

Question

我使用带有React的Mapboxgl在我的网页上显示地图，但是在设置mapbox的大小时遇到​​了很大的麻烦。我写了自己的CSS类至少显示地图，否则出于某些原因显示高度为0。我的 自定义CSS类如下所示

.custom-map {
  display: flex;
  width: 100%;
  height: 54em;
}

我还在项目中本地加载了mapboxgl css文件，完整文件加载到了页面上。我当前的源代码可以在here中找到，我尝试了很多样式，可以在此处设置样式

 <div
        ref={el => (this.mapContainer = el)}
        className="mapboxgl-map absolute custom-map top right left bottom"
 />

当前mapbox容器看起来像这样，请注意，从mapbox弹出的信息一直到我想要的位置，但是地图却没有。

mapbox的css文件将地图的高度设置为％，但是由于某种原因，以％为单位的高度却无法正常工作，我必须使用em来设置高度。从mapbox css文件禁用自定义地图并在em中设置高度，我得到的实际高度大于100％。即使使用em，从.mapboxgl-map更改width属性也不会执行任何操作。

我不确定错误在哪里，因此我很难发布解决该问题所需的所有相关信息，我很乐意发布任何其他所需的信息。预先感谢您的答复！

Answer 1

我遇到了类似的问题，当我为新的MapboxGL地图创建自己的包装器时。此问题仅在Firefox和Safari上显示。这不是最好的解决方案，但这可能是一个不错的解决方法。将以下内容添加到地图组件中：

this.map.once('load', () => {
  this.map.resize()
})

这意味着地图的初始渲染看起来很糟糕。您将需要一些东西来掩盖加载过程。但是，如果没有一种解决方案可以使其在虚拟dom中首次正确渲染，则可能会成功。