Mapbox Leaflet缩放无法从中心开始

问题描述

问题

我在站点https://upplevelsekartan.com/djurparker上使用MapBox（传单）（单击Karta）。放大时，它不是从中间放大，而是从左上角放大。

孤立

下面的示例使用与我的网站完全相同的代码，但是此示例可以正常工作。看不到，请在“整页”中运行。缩放时，它会像预期的那样从中心缩放。

问题

为什么孤立地完美运行，却无法在我的网站上运行？我该如何解决？

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>

解决方法

如果您更改

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

到

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

它应该解决您的问题。