如何使用复选框实现多张地图的显示与隐藏？

优化后的完整代码 #

<body>
    <script>
        // 全局对象缓存已创建的地图实例，避免重复初始化
        const mapInstances = {};

        // 初始化地图1
        function initMap1() {
            const map = L.map('map').setView([0, 0], 1);
            L.tileLayer('https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=RM234QFDXeTVS0G8RUEl', {
                attribution: '&copy; <a href="https://www.maptiler.com/copyright/" target="_blank">MapTiler</a> &copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap contributors</a>'
            }).addTo(map);
            L.marker([51.5, -0.09]).addTo(map);
            return map;
        }

        // 初始化地图2
        function initMap2() {
            const map = L.map('map2').setView([39.9, 116.4], 10);
            L.tileLayer('https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=RM234QFDXeTVS0G8RUEl', {
                attribution: '&copy; <a href="https://www.maptiler.com/copyright/" target="_blank">MapTiler</a> &copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap contributors</a>'
            }).addTo(map);
            L.marker([39.9, 116.4]).addTo(map);
            return map;
        }

        function myFunction() {
            // 处理地图1的显示/隐藏
            const vehicle1 = document.getElementById('vehicle1');
            const map1El = document.getElementById('map');
            if (vehicle1.checked) {
                map1El.style.display = 'block';
                // 如果地图未初始化，创建实例并缓存
                if (!mapInstances.map1) {
                    mapInstances.map1 = initMap1();
                }
            } else {
                map1El.style.display = 'none';
            }

            // 处理地图2的显示/隐藏
            const vehicle2 = document.getElementById('vehicle2');
            const map2El = document.getElementById('map2');
            if (vehicle2.checked) {
                map2El.style.display = 'block';
                if (!mapInstances.map2) {
                    mapInstances.map2 = initMap2();
                }
            } else {
                map2El.style.display = 'none';
            }

            // 处理文本3的显示/隐藏（保留原逻辑）
            const vehicle3 = document.getElementById('vehicle3');
            const text3El = document.getElementById('text3');
            text3El.innerHTML = vehicle3.checked ? 'Option 3 checked' : '';
        }
    </script>
    <style>
        /* 给地图容器设置基础样式，确保显示正常 */
        #map, #map2 {
            width: 400px;
            height: 300px;
            display: none; /* 默认隐藏 */
            margin: 10px 0;
            border: 1px solid #ccc;
        }
        .splitr {
            float: right;
            margin-right: 20px;
        }
        .splitl {
            float: left;
            margin-left: 20px;
        }
    </style>
    <div class="splitr">
        <div id="map"></div>
        <div id="map2"></div>
        <div><p id="text3"></p></div>
    </div>
    <div class="splitl">
        <div class="top">This is top<br>
            <input type="checkbox" id="vehicle1" name="option1" value="1" onclick="myFunction()">
            <label for="vehicle1"> 显示/隐藏地图1</label><br>
            <input type="checkbox" id="vehicle2" name="option2" value="2" onclick="myFunction()">
            <label for="vehicle2"> 显示/隐藏地图2</label><br>
            <input type="checkbox" id="vehicle3" name="option3" value="3" onclick="myFunction()">
            <label for="vehicle3"> 显示/隐藏文本3</label><br>
        </div>
    </div>
</body>

核心实现思路 #

• 绑定复选框与对应地图：每个复选框的ID和对应地图容器的ID建立关联，点击时直接操作目标容器。
• 缓存地图实例：用全局对象mapInstances保存已创建的地图，避免每次勾选都重新加载地图资源，提升性能。取消勾选时仅隐藏容器，不销毁地图，再次勾选直接显示即可。
• 统一控制逻辑：对每个复选框，判断勾选状态后切换地图容器的display属性：勾选时显示容器，未初始化则创建地图；取消时隐藏容器。
• 基础样式保障：给地图容器设置固定宽高和默认隐藏样式，确保地图渲染正常。

扩展建议 #

如果需要控制更多地图，只需要：

1. 添加新的复选框和对应的地图容器，设置唯一ID。
2. 编写对应地图的初始化函数（比如initMap3）。
3. 在myFunction中添加新的判断逻辑，复用缓存和显示/隐藏的逻辑。

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