折叠左侧面板时Leaflet地图显示空白，invalidateSize()无效如何解决？

核心问题与修复步骤 #

• 错误的元素选择与重复事件绑定
  原生JS代码中document.getElementById("#collapse")多了#前缀，ID选择器不需要这个符号。同时你用原生JS和jQuery重复绑定了折叠按钮的点击事件，导致invalidateSize()在面板尺寸还未变化时就被调用，无法触发地图重绘。

• 调用invalidateSize()的时机错误
  必须等待面板折叠完成、地图容器尺寸更新后，再调用该方法，才能让Leaflet重新计算地图的可视区域。

• 地图容器高度未正确继承
  #map设置了height:100%，但父元素.right、.box以及根元素html、body未设置高度，导致地图无法撑满容器，需要补充高度样式。

修正后的完整代码 #

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
          integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
          crossorigin=""/>

    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
            integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
            crossorigin=""></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

    <style>
        html, body { height: 100%; margin: 0; padding: 0; }
        #map { height: 100%; }

        .box { height: calc(100% - 30px); } /* 留出折叠按钮的空间 */

        .left {
            width:20%;
            background:red;
            float:left;
            height: 100%;
        }

        .right {
            width:80%;
            background:green;
            float:left;
            height: 100%;
        }

        .right-100 {
            width:100%;
        }

        .left-0 {
            width:0%;
            overflow: hidden; /* 隐藏左侧面板内容 */
        }

        .collapse {
            background:blue;
            color:white;
            width:100px;
            cursor: pointer;
            padding: 5px;
        }
    </style>
</head>
<body>

<div class="collapse" id="collapse">collapse it</div>
<div class="box">
    <div class="left">
        Hello Shubham
    </div>

    <div class="right">
        <div id="map"></div>
    </div>
</div>

<script>
    var map = L.map('map').setView([51.505, -0.09], 13);

    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
        maxZoom: 18
    }).addTo(map);

    // 合并点击事件，确保尺寸变化后调用invalidateSize
    $(document).on('click', '.collapse', function () {
        $('.right').toggleClass('right-100');
        $('.left').toggleClass('left-0');
        // 延迟调用确保DOM更新完成，也可以直接调用，这里保险起见加个小延迟
        setTimeout(function() {
            map.invalidateSize();
        }, 10);
    });
</script>

</body>
</html>

额外说明 #

• 用toggleClass代替直接添加类，实现面板的折叠/展开切换功能
• 给.left-0添加overflow: hidden，避免左侧面板内容溢出
• 给html、body添加margin:0; padding:0，消除默认边距导致的滚动条
• 添加小延迟调用invalidateSize()，确保DOM尺寸更新完成后再触发地图重绘，部分浏览器可能需要这个延迟保证生效

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