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

经过数小时的努力寻找解决方案和尝试解决方案，我终于明白了如何使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来工作。

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

CSS

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

Answer 3

将此添加到css中

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

和{ position: relative }给它的父div