如何在Framework7中正确显示Leaflet地图？全屏显示异常排查

问题根源 #

1. Framework7的page-content默认带内边距，再加上你嵌套的row、col网格类自带间距，导致地图容器实际尺寸超出视口
2. position: fixed会脱离Framework7的页面布局流，和框架的滚动、容器规则冲突
3. Leaflet初始化时可能没正确计算容器的实际尺寸

修复步骤 #

1. 简化HTML结构

去掉多余的row、col嵌套，让地图容器直接占满page-content：

<div class="page-content">
  <div id="map"></div>
</div>

2. 调整CSS规则

重置page-content的内边距，让地图容器自适应父容器尺寸，避免fixed定位冲突：

.page-content {
  padding: 0 !important; /* 覆盖Framework7默认内边距 */
}

#map {
  width: 100%;
  height: 100vh; /* 直接占满视口高度 */
  overflow: hidden;
}

3. 完善JS初始化逻辑

地图初始化后调用invalidateSize()，强制Leaflet重新计算容器尺寸，适配Framework7布局：

on: {
  pageInit: function(e, page) {
    // 初始化地图
    var map = L.map('map').setView([48.864716, 2.349014], 8);
    // 添加瓦片图层（缺失这一步地图会显示空白）
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© OpenStreetMap contributors'
    }).addTo(map);
    // 延迟刷新地图尺寸，确保Framework7页面渲染完成
    setTimeout(() => {
      map.invalidateSize();
    }, 100);
  }
},

补充说明 #

如果第二个页面需要非全屏地图，只需给#map设置固定高度（比如height: 300px）并保留width:100%即可，无需修改page-content的内边距；同时注意不要在地图容器上嵌套Framework7网格类，避免额外间距影响尺寸。

内容的提问来源于stack exchange，提问作者Jean