Mapbox-gl 高度 100%

Question

Mapbox 不适合它的容器。为什么不是？

这是呈现的 html：

<div class="map mapboxgl-map" id="mapBox">
  <div class="mapboxgl-canvas-container">
    <canvas class="mapboxgl-canvas" style="position: absolute; width: 1920px; height: 277px;" tabindex="0" aria-label="Map" width="1920" height="277">
    </canvas>
  </div>
</div>

这些277px是我猜的默认值。

这是js：

mapboxgl.accessToken = 'blabla';
  var map = new mapboxgl.Map({
    container: 'mapBox',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [-77.04, 38.907],
    zoom: 11.15
  });

这是 scss：

.map {
  grid-column: 1/-1;
  height: 100%;
  position: relative;
  canvas, .mapboxgl-canvas {
    height: 100%;
  }
}

如果我将如此著名的添加!important到 ，height: 100%;那么它会起作用，但地图会被拉伸。

我该怎么做？

Answer 1

我找到了诀窍。

只需添加

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

到 js 以便地图将调整大小到它的容器

Answer 2

经过几个小时试图找到解决方案并在 SO 上尝试解决方案后，我终于明白了如何使 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%;
}