时间戳

首页 > 解决方案 > Leaflet fitbounds display:none (Bootstrap5 tabnav)

javascript - Leaflet fitbounds display:none (Bootstrap5 tabnav)

问题描述

当页面加载时，尝试了很多小时尝试在选项卡“后面”加载传单地图（显示：无）。我知道使用invalidateSize()是必要的。

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

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

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

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

但是，当尝试缩放[+]或[-]时，它可以工作，然后在 100 毫秒后，地图将由setInterval -函数重置。所以尝试setTimeout -function（一次性加载）：

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

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

但是 setTimeout 函数不起作用。

要获得更好的解释并查看完整代码，请转到此测试网页并单击“Kaartweergave”选项卡（请参阅源代码）。

希望有人可以帮助我，我花了很多时间试验和浏览互联网/Stackoverflow，找到了一个解决方案，但没有运气:(

标签： javascriptleaflet

解决方案

您可以监听选项卡的点击事件，然后调用地图函数：

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

不需要setInterval

推荐阅读