页面初始加载Leaflet JS地图显示不全 调整窗口后恢复问题排查

invalidateSize()调用时机错误。$(document).ready触发时仅完成DOM树解析，此时页面还没完成最终布局重排，带栅格、边距的地图容器#map实际尺寸还没计算完成，Leaflet初始化时只能拿到当时的异常小尺寸，因此仅渲染小块区域。手动调整浏览器窗口时会自动触发Leaflet尺寸重算逻辑，因此地图可以恢复正常显示。

另外你代码里还有两个隐性问题：

• 瓦片图层用了http协议，站点部署为https时会触发混合内容拦截，导致瓦片加载失败
• 瓦片图层maxZoom设为10数值过低，用户放大地图时会出现无瓦片的空白区域

直接替换原有JS逻辑即可：

// 替换$(document).ready为load事件，等页面所有布局、资源加载完成后再初始化地图
$(window).on('load', function () {
    var center = [-0.421498116026705, 36.950147769312004];
    var propertiesmap = L.map('map').setView(center, 10);

    var googleStreets = L.tileLayer('https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',{
        maxZoom: 18,
        subdomains:['mt0','mt1','mt2','mt3']
    });
    googleStreets.addTo(propertiesmap)

    L.marker(center).addTo(propertiesmap);
    
    // 短延迟后刷新地图尺寸，兼容部分浏览器布局延迟的场景
    setTimeout(function() {
        propertiesmap.invalidateSize();
    }, 100);
});

如果后续你把地图放到默认隐藏的标签页、折叠面板内，需要在组件展开显示的回调函数中执行propertiesmap.invalidateSize()，隐藏状态下容器尺寸为0，同样会触发渲染不全的问题。

• 确认Leaflet的CSS文件正常加载，CSS加载失败会直接导致地图容器尺寸计算异常
• 确认地图容器的父级元素没有设置display: none、overflow: hidden等会干扰子元素尺寸计算的样式

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