css - map Canvas 大小 MapboxGL JS

Question

我正在使用 Mapboxgl 和 React 在我的网页上显示 map ，但我在设置 map 框的大小时遇到​​了很大的麻烦。我编写了自己的 css 类以至少显示 map ，否则由于某种原因它显示为 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 弹出的信息一直到我想要的地方，但 map 没有。

mapbox css 文件将 map 的高度设置为 %，但由于某种原因，% 的高度不起作用，我必须使用 em 设置高度。从 mapbox css 文件中禁用自定义 map 并设置 em 高度，我得到的实际高度大于 100%。从 .mapboxgl-map 更改宽度属性不会执行任何操作，即使在使用 em 时也是如此。

我不确定错误出在哪里，所以我很难发布解决此问题可能需要的所有相关信息，我很乐意发布任何需要的额外信息。预先感谢您的回复!

Answer 1

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

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

这意味着 map 的初始渲染看起来很糟糕。你会想要一些东西来掩盖加载过程。但是如果没有一个解决方案可以让它第一次正确地在虚拟 dom 中渲染，它可能会成功。