Leaflet fitbounds display:none（Bootstrap5 tabnav）

Question

尝试大量时间来试验在加载页面时加载 Leaflet 地图 'behind' 选项卡（显示：none）。我知道使用 invalidateSize().

是必要的

好的，使用 invalidateSize()，它可以在单击选项卡后加载 Leaflet 地图 'Kaartweergave'。

问题是地图适合“边界”。

在我的传单脚本中添加时：

setInterval(function () {
 mymap.invalidateSize();
 mymap.fitBounds(bounds);
}, 100);

它有效，但是，当尝试缩放 [+] 或 [-] 时，地图将在 100 毫秒后重置setInterval 函数。所以尝试 setTimeout-function (onetime-loading):

setInterval(function () {
 mymap.invalidateSize();
}, 100);

setTimeout(function () {
 mymap.fitBounds(bounds);
}, 100);

但是 setTimeout 函数不起作用。

为了更好的解释和查看完整的代码，请转到此 test-webpage 并单击选项卡 'Kaartweergave'（查看源代码）。

希望有人能帮助我，我花了很多时间来试验和浏览 internet/Whosebug，找到解决方案，但没有运气:(

Answer 1

可以监听tab的点击事件，然后调用地图函数：

function startMap(){
  setTimeout(function(){
    mymap.invalidateSize();
    mymap.fitBounds(bounds);
  }, 200)
}
var mapTab = document.getElementById('leaflet-map-tab')
L.DomEvent.on(mapTab,'click',startMap)

不需要 setInterval

Leaflet fitbounds display:none（Bootstrap5 tabnav）

Leaflet fitbounds display:none (Bootstrap5 tabnav)

javascript

leaflet