Mapbox-gl 高度 100%答案

【问题标题】：Mapbox-gl height 100%Mapbox-gl 高度 100%
【发布时间】：2019-12-01 15:41:29
【问题描述】：

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%;，那么它可以工作，但地图会被拉伸。

我该怎么做？

【问题讨论】：

可能是因为画布是绝对定位的。不知道为什么会这样......它不会以这种方式增加父母的身高。
您永远不需要直接为画布设置样式。您遇到的实际问题是什么？
画布不响应它不适合容器的高度。有这些内联的 227px，我不知道它们来自哪里，在 mapbox 文档中我找不到任何关于响应的信息。

标签： jquery sass responsive-design css-grid mapbox-gl-js

【解决方案1】：

我找到了诀窍。

添加

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

到 js，所以地图将调整到它的容器

【讨论】：

这太棒了❤
你可以使用 map.on('load', function(){}) 而不是 map.on('render', function(){}) 这将使大小占据整个容器的大小在地图加载之前，因为地图可以以小尺寸加载，然后将其调整为全尺寸，这会产生糟糕的 UI 体验。在渲染事件中，它会在加载之前调整大小

【解决方案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%;
}

【讨论】：

最佳答案！
请注意，如果您希望标记保持不变，您还需要将它们设置为绝对：.mapboxgl-marker { position: absolute; top: 0; left: 0; }。
2021 年更新是 imo 的正确答案。如果地图父级在网格内，请将其位置设置为相对，然后应用带有绝对定位的#map 样式。

【解决方案3】：

将此添加到您的 CSS 中

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

和 { position: relative } 到它的父 div

【讨论】：

mapbox 脚本忽略了这一点
.....它奏效了。还修复了我的滚轮滚动地图而不是放大和缩小的问题。最佳答案。虽然我没有父位置：relative 因为我已经将它作为绝对。

【解决方案4】：

const [viewport, setViewport] = useState({ 宽度：'100%'， height: 'calc(100vh - 162px)', // 162px 是地图顶部所有元素的大小高度纬度：0，经度：0，缩放：12，轴承：0，间距：0，过渡持续时间：2000， transitionInterpolator: new FlyToInterpolator(), });

【讨论】：

【解决方案5】：

我发现唯一可靠的方法是使用 jQuery。在我的情况下，地图位于页面加载时未激活的选项卡中，因此我在切换到包含地图的选项卡时执行代码。

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

编辑：这行得通，但地图看起来丑陋且像素化。我可能会回到谷歌地图。

【讨论】：

这没有回答问题。关于谷歌地图的评论不相关。