Leaflet地图不显示，修改.leaflet-container的overflow属性才生效如何修复

问题原因&修复方案 #

1. 核心错误：地图初始化代码写法错误 #

你当前的JS代码中var map = L.map.invalidateSize();不符合Leaflet的API规范：

• L.map()是地图构造方法，必须传入目标DOM的ID（也就是你定义的map）才能完成地图实例初始化
• invalidateSize()是地图实例的方法，不能直接在L.map构造函数上调用

2. overflow属性异常原因 #

官方Leaflet默认给.leaflet-container设置了overflow: hidden属性，用来裁剪地图视口外的瓦片内容，如果你的页面存在其他全局CSS覆盖了这个属性，就会导致地图渲染异常，不需要清空overflow值，只需明确指定该属性避免被覆盖即可。

修复后完整代码参考 #

CSS部分

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"  />
<style>
    body {
        padding: 0;
        margin: 0;
    }
    html, body, #map {
        height: 100%;
        width: 100%;
    }
    /* 明确指定leaflet容器样式，避免被全局规则覆盖 */
    .leaflet-container {
        overflow: hidden;
    }
</style>

JS部分

<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script>
    // 初始化地图实例，示例初始中心点为北京，缩放层级10，可根据需求修改
    var map = L.map('map').setView([39.9042, 116.4074], 10);
    // 若存在容器尺寸计算异常，可以调用该方法刷新布局
    map.invalidateSize();
    L.tileLayer(
        'https://api.maptiler.com/maps/streets/256/{z}/{x}/{y}.png?key=ekfefkerdkdfk2', 
        {attribution: '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>'}
    ).addTo(map);
</script>

如果修改后仍有异常，可以排查页面是否有其他全局CSS修改了容器的position、display等属性，影响了Leaflet的布局计算。

内容的提问来源于stack exchange，提问作者Aliaksei.Statkevich