我 找到 窍门 了 。
只是 添加 了

map.on('load', function () {
    map.resize();
});

中 的 每 一 个
这样 Map 将 根据 其 容器 大小 调整 大小

经过 几 个 小时 的 努力 ， 我 终于 明白 了 如何 让 Mapbox 适合 它 的 容器 。 要 让 Mapbox 适合 它 的 容器 ， 而 不 需要 设置 绝对 高度 ， 它 必须 是 父 div 的 第 一 个 直接 子 元素 。 Mapbox 不能 是 第 二 个 ， 第 三 个 或 第 四 个 子 元素 ， 等等 。 为什么 ？ 我 的 猜测 是 mapbox-gl.css 与 自 定义 的 css 规则 冲突 。

• • 每次 都 有效 ： * *

<section class="map_box_container">
    <!--MAP-->
  <div id='map'></div>
</section>

中 的 每 一 个

• • 这 永远 行不通 * *

<section class="map_box_container">
<div class="second_child">
        <!--MAP-->
      <div id='map'></div>
</div>
    </section>

格式

• • CSS 格式 * *

.map_box_container{
  position: relative;
  height: 100% !important;
  width: 100% !important;
}

  #map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
  }

格式

# # 2021 年 更新

我 在 一 个 新 的 项目 中 使用 mapbox ， 据 我 所 知 ， mapbox 不 需要 它 的 父 容器 有 任何 css 来 工作 。

• • HTML 格式 * *

<section class="map_box_container">
<!--MAP-->
<div id='map'></div>
</section>

格式

• • CSS 格式 * *

#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}

格式

将此添加到您的CSS

.mapboxgl-map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    }

和{ position: relative }添加到其父div

这个对我很有效。它需要一段时间才能生效，但它是值得的。

map.on('load', function() {
    $('.mapboxgl-canvas').css('width', '100%');
    $('.mapboxgl-canvas').css('height', '100%');
    map.resize();
});

# 没有 绝对 定位 的 纯 CSS 解决 方案 。

# # # 新 方法 ：

添加 到 Package 器 ：

aspect-ratio: 1 / 1;

中 的 每 一 个
如果 您 想要 矩形 （ 例如 ：.9 ） 的 数据 。

# # # 旧 方法 ：

每个 父 容器 的 高度 必须 大于 0 。 检查 您 的 dev 检查 器 。 为 每个 呈现 高度 为 0 的 容器 添加 height: 100%; 。 然后 为 您 的 map Package 器 添加 以下 两 个 CSS 声明 ：

height: 100%;
max-height: 500px;

格式
改变 500 到 任何 工程 在 您 的 媒体 查询 ， 你 应该 是 好 的 。

const [viewport, setViewport] = useState({
    width: '100%',
    height: 'calc(100vh - 162px)', // 162px is size height of all elements at the top of the map
    latitude: 0,
    longitude: 0,
    zoom: 12,
    bearing: 0,
    pitch: 0,
    transitionDuration: 2000,
    transitionInterpolator: new FlyToInterpolator(),
  });

2022
1-更新Map脚本add map.resize()

<script>
  map.on("load", () => {map.resize()
</script>

2-更新您的html添加tailwind class="aspect-square w-full h-full"或添加style="aspect-ratio: 1 / 1"：

<div id="map"
  class="aspect-square w-full h-full"
  style="aspect-ratio: 1 / 1;"
>
</div>

我 找到 的 唯一 可靠 的 方法 是 使用 jQuery 。 在 我 的 例子 中 ， Map 位于 页面 加载 时 不 活动 的 标签 中 ， 所以 我 在 切换 到 保存 Map 的 标签 时 执行 代码 。

var $ = window["$"];
$('.mapboxgl-canvas').css('width', '100%');
$('.mapboxgl-canvas').css('height', '100%');

中 的 每 一 个
编辑 ： 那 很 好 用 ， 但是 Map 看 起来 很 丑 ， 像 素 化 了 。 我 很 可能 会 回到 谷歌 Map 。