Mapbox Leaflet 無法從中心縮放

Question

問題

我在網站https://upplevelsekartan.com/djurparker （單擊 Karta）上使用 Mapbox（傳單）。 放大時不是從中間放大，而是從左上角放大。

處於隔離狀態

下面的示例使用與我的站點完全相同的代碼，但此示例按預期工作。 太見了，全頁運行。 縮放時，它會像它應該的那樣從中心縮放。

題

為什么它可以單獨運行，但不能在我的網站上運行？ 我該如何解決？

 window.addEventListener('DOMContentLoaded', async() => { await import('https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'); mapboxgl.accessToken = 'pk.eyJ1IjoiamVuc3Rvcm5lbGwiLCJhIjoiY2tjb290djIwMG5kZzJzbG1zNGsxeWZ6OSJ9.85qNaU7Xm5Cs2i2yK5tVCw'; var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/streets-v11', }); map.fitBounds([ // Sweden [11.0273686052, 55.3617373725], [23.9033785336, 69.1062472602] ], {padding: 16}); map.on('load', () => { }); }, false );

 div { height: 300px; width: 300px; }

 <div id="map"></div>

Answer 1

如果你改變

.mapboxgl-canvas {
  position: absolute;
  left: 0;
  top: 0;
}

到

.mapboxgl-canvas {
  position: relative;
  left: 0;
  top: 0;
}

它應該可以解決您的問題。