html - 为什么 mapbox 没有正确加载 map ？

Question

我的网站上安装了一个非常简单的 mapbox。不管出于什么原因，它只显示了大约 50% 的 map 。我不知道这是 webkit 问题还是我的样式有问题。

这是我的 index.html 文件中的内容:

<div id="map" class="map">
      <script>
        mapboxgl.accessToken =
          "pk.eyJ1IjoiYnJhbmF1c3QiLCJhIjoiY2thZzlvMWJrMDVpNDJwbWprcjZuOWs0ZSJ9.fhHUkmUo3OFZpv74nmsqeA";
        var map = new mapboxgl.Map({
          container: "map",
          style: "mapbox://styles/branaust/ckah0ufz017b71jrsp5pm2w0d",
        });
        map.resize()
      </script>
      </div>

这是我的样式:

#map {
  display: flex;
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  height: 100%;
  width: 100%;
}

这是我看到的图片:

很奇怪，因为当我调整浏览器窗口大小时， map 会填充 div 元素，但是当我第一次加载网页时它只显示一半？

Answer 1

在加载后使用 map.on('load', function() {}) 调用 resize 以确保在加载 map 时调用它，而不是在加载 map 时调用它之前。

mapboxgl.accessToken =
      "pk.eyJ1IjoiYnJhbmF1c3QiLCJhIjoiY2thZzlvMWJrMDVpNDJwbWprcjZuOWs0ZSJ9.fhHUkmUo3OFZpv74nmsqeA";
    var map = new mapboxgl.Map({
      container: "map",
      style: "mapbox://styles/branaust/ckah0ufz017b71jrsp5pm2w0d",
    });
map.on('load', function() {
    map.resize()
});

#map {
  display: flex;
  height: 100%;
  width: 100%;
}

.container {
  display:grid;
  grid-template-columns:1fr 1fr;
  height:500px;
  border:2px solid red;
}

<script src="https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css" rel="stylesheet" />
<div class="container">
<div id="map" class="map">
</div>
<div>

</div>
</div>