Mapbox GL JS畫布無法在Bootstrap模式下正確顯示

Question

根據Mapbox GL JS快速入門指南，使用Mapbox CDN在網站上實施地圖應該很簡單。 不幸的是，如果地圖位於沒有預定義寬度的Bootstrap模態內部，則情況並非如此，Bootstrap模態僅在打開模態后才設置屬性。

結果是加載了默認寬度為400px的Mapbox畫布，該默認寬度可能與模式寬度不同，並帶來了糟糕的用戶體驗。

另外，如果打開模態然后調整瀏覽器窗口的大小，則地圖會自動按預期適合整個水平空間，這似乎是對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'
});

我嘗試將Mapbox加載到Bootstrap 3.4.0模態中，就像以前使用Google Maps或Bing Maps時那樣，但是在兩種情況下都嵌入到iframe中。 因此，我期望看到Mapbox像Google Maps和Bing Maps一樣填充整個模式。

取而代之的是，將Mapbox界面（左下方的徽標和右下方的信息按鈕）正確地放置在模態內部，邊界處，但是包含地圖的畫布的位置不正確。

最后，為#map CSS屬性設置預定義的寬度不是解決方案。 如果將寬度設置為以像素為單位的固定寬度，則可能無法在所有窗口尺寸上正確顯示，而增加固定的百分比寬度（例如100％）則無濟於事。

Answer 1

Leaflet JavaScript庫在這里和這里都已經解決了類似的問題。

事實證明，模態缺少預定義的寬度使Mapbox無法選擇，只能初始加載默認寬度（在這種情況下為400px）。 由於打開模態不會觸發Mapbox可能正在偵聽的任何事件（例如調整窗口大小），因此，無論該模式顯示后為它設置的大小如何，Mapbox都會保留其默認寬度。

因此，要使Mapbox畫布填充模式的整個寬度，必須將模式的開口（最終將為其設置寬度）鏈接到Mapbox調整大小方法。

這里感興趣的Bootstrap事件是“ shown.bs.modal” ，一旦向用戶顯示了模式並且CSS轉換完成，就會觸發該事件。 這樣可以確保已將寬度設置為模態。

解決方案是在JS文件中的“ map”變量定義之后添加以下代碼：

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

確保將“ modalID”更改為用於標識相應模態的相同“ id”。