jquery - 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%; 那么它可以工作，但 map 会被拉伸(stretch)。

我该怎么做？

Answer 1

我找到了窍门。

只需添加

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

到 js，这样 map 就会调整到它的容器的大小