Mapbox-gl 高度 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%;
}

Answer 3

这对我有用，并且在调整大小之前您不会像在接受的答案中那样看到明显的滞后：

document.addEventListener("DOMContentLoaded", () => map.resize());

Answer 4

将其添加到你的CSS中

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

和

{ position: relative }

到其父 div

Answer 5

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

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

Answer 6

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

新方法：

添加到你的包装纸中：

aspect-ratio: 1 / 1;

如果您想要一个矩形，请使用该值（例如：

.9

）。

旧方法：

每个父级的高度必须大于 0。请检查您的开发检查器。对于每个渲染高度为 0 的容器添加

height: 100%;

。然后为您的地图包装器添加这两个 CSS 声明：

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

将 500 更改为在您的媒体查询中有效的任何内容，您应该会很好。

Answer 7

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(),
  });

Answer 8

2022

1- 更新您的地图脚本添加

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>

Answer 9

对于使用react-map的人（也许还有其他人），这是我解决问题的方法：

<div className="flex flex-col min-h-screen" />
   <h1> Hey!</h1>
   <Map style={{ width: '100vw', height: 'inherit', flexGrow: 1 }} />
 </div>

对我来说，关键是通过将其设置为继承来杀死 Mapbox 中的

height: 100%

。

注意：我使用的是 Tailwind。

Answer 10

我发现的唯一可靠的方法是使用 jQuery。就我而言，地图位于页面加载时不活动的选项卡中，因此我在切换到保存地图的选项卡时执行代码。

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

编辑：这可行，但地图看起来很丑而且像素化。我可能会回到 Google 地图。