javascript - Mapbox GL JS Canvas 在 Bootstrap 模式中无法正确显示

Question

根据Mapbox GL JS Quickstart指南，使用 Mapbox CDN 在网站上实现 map 应该很简单。不幸的是，如果 map 位于 Bootstrap 模态框内，则情况并非如此，该模态框没有预定义的宽度，该属性仅在打开模态框后设置。

结果是加载了一个默认宽度为 400px 的 Mapbox Canvas ，这可能与模态宽度不同，并造成糟糕的用户体验。

此外，如果打开模式然后调整浏览器窗口的大小， map 会按预期自动适应整个水平空间，这似乎是 JavaScript 对调整大小事件的响应。

下面是相关代码。

HTML 文件

<div id='map'></div>

CSS 文件

#map {
  height: 300px;
}

JS文件

mapboxgl.accessToken = '...';
var map = new mapboxgl.Map({
    container: 'map',
    center: [..., ...],
    zoom: 10,
    style: 'mapbox://styles/mapbox/streets-v11'
});

我尝试在 Bootstrap 3.4.0 模态中加载 Mapbox，就像我之前在使用 Google map 或 Bing map 时能够做到的那样，但在这两种情况下都嵌入了 iframe。因此，我期待看到 Mapbox 像 Google Maps 和 Bing Maps 一样填充整个模式。

相反，Mapbox 界面(左下方 Logo 和右下方信息按钮)正确定位在模态框内的边界处，但包含 map 的 Canvas 定位不正确。

最后，为#map CSS 属性设置预定义宽度不是解决方案。如果将宽度设置为以像素为单位的固定宽度，则它可能无法在所有窗口大小上正确显示，而添加固定百分比宽度(例如 100%)并不能解决问题。

Answer 1

Leaflet 的类似问题已经解决。 JavaScript 库 here和 here .

事实证明，缺少预定义的模态宽度使 Mapbox 没有选择，只能加载默认宽度(在这种情况下为 400 像素)。因为打开 modal 不会触发 Mapbox 可能正在监听的任何事件，例如窗口大小调整，所以 Mapbox 保持其默认宽度，无论为 modal 设置的大小一旦显示。

因此，要使 Mapbox Canvas 填满模态框的整个宽度，必须将模态框的开口(最终为其设置宽度)链接到 Mapbox 的 resize 方法。

这里感兴趣的 Bootstrap 事件是 "shown.bs.modal" ，一旦模态显示给用户并且 CSS 转换完成后触发。这保证了宽度已经设置为模态。

解决方法是在JS文件中'map'变量定义后添加如下代码:

$('#modalID').on('shown.bs.modal', function() {
    map.resize();
  });

确保将“modalID”更改为用于识别相应模态的相同“id”。