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;
}

它应该可以解决您的问题。

Mapbox Leaflet 缩放从中心不起作用

Mapbox Leaflet zoom does not work from the center

javascript

center

zooming

leaflet

mapbox

问题

隔离

问题