Mapbox GL JS画布无法在Bootstrap模式中正确显示

Question

根据Mapbox GL JS Quickstart指南，使用Mapbox CDN在网站上实现地图应该是直截了当的。不幸的是，如果地图位于Bootstrap模式内部并不是这种情况，Bootstrap模式没有预定义的宽度，只有在打开模态后才设置该属性。

结果是一个Mapbox画布加载了默认宽度400px，这可能与模式宽度不同，并创建一个糟糕的用户体验。

此外，如果打开模态然后调整浏览器窗口的大小，地图会按预期自动适合整个水平空间，这似乎是对resize事件的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，就像我以前在使用谷歌地图或Bing地图时所做的那样，但在两种情况下嵌入在iframe中。因此，我期待看到Mapbox填充整个模态，就像Google Maps和Bing Maps那样。

相反，Mapbox界面（左下角徽标和右下角信息按钮）在其边框处正确定位在模态内部，但包含地图的画布未正确定位。

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

Answer 1

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

事实证明，缺少模态的预定义宽度使Mapbox没有选项，但最初加载默认宽度（在这种情况下为400px）。因为打开模态不会触发Mapbox可能正在侦听的任何事件，例如窗口调整大小，所以无论模式在显示时设置的大小如何，Mapbox都会保留其默认宽度。

因此，要使Mapbox画布填充模态的整个宽度，必须将模式的开头（最终将为其设置宽度）链接到Mapbox调整大小方法。

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

解决方案是在JS文件中的'map'变量定义之后添加以下代码：

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

确保将'modalID'更改为用于标识相应模态的相同'id'。