JS/CSS集成异常：地图未显示、Range与Number输入框值不同步

存在的问题 #

• Chrome浏览器打开HTML文件时，地图容器未渲染，仅显示滑块和输入框
• 拖动Range滑块时，Number输入框值无法同步更新

问题原因 #

1. 地图未渲染：缺少Leaflet的核心CSS和JS依赖，Leaflet需要官方样式和脚本才能渲染地图；同时DOM未加载完成就执行地图初始化代码，导致无法找到#mapid容器。
2. 输入框不同步：事件绑定时机错误（DOM未就绪就绑定），且重复绑定事件导致逻辑冲突，初始set变量值与输入框默认值不一致。

修复后的完整代码 #

HTML部分 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>可调整半径的圆形地图</title>
    <!-- 引入Leaflet核心依赖 -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <!-- 引入jQuery -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
        div.row {
            width: 700px;
            margin: 0 auto;
        }

        div > input {
            display: block;
            width: 300px;
            margin: 10px;
        }

        #mapid {
            height: 250px;
            width: 300px;
        }
    </style>
</head>
<body>
    <div class="row">
        <div class="col-xs-6">
            <input type="number" class="kilometres" name="kilometres" min="0" max="100" placeholder="15" value="15" />
            <input type="range" class="range" name="range" min="0" max="100" step="1" value="15" />
        </div>
        <div class="col-xs-6">
            <div id="mapid"></div>
        </div>
    </div>

    <script>
        function map() {
            // 初始值与输入框默认值保持一致
            let set = 15;
            let zoom = 9;
            let circles;
            let entreprise = [43.600000, 1.433333];
            let mymap = L.map('mapid').setView(entreprise, zoom);

            let osmLayer = L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                attribution: '&copy; OpenStreetMap contributors',
                maxZoom: 18
            });

            mymap.addLayer(osmLayer);
            L.marker(entreprise).addTo(mymap);

            // 初始化圆形
            circles = L.circle(entreprise, 1000 * set, {
                color: 'red',
                fillColor: '#f03',
                fillOpacity: 0.5
            }).addTo(mymap);

            // 统一处理输入事件，同步值并更新圆形
            $('.range, .kilometres').on('input', function() {
                // 根据当前触发元素更新set值
                if ($(this).hasClass('range')) {
                    set = $(this).val();
                    $('.kilometres').val(set);
                } else {
                    set = $(this).val();
                    $('.range').val(set);
                }

                // 更新圆形
                mymap.removeLayer(circles);
                circles = L.circle(entreprise, 1000 * set, {
                    color: 'red',
                    fillColor: '#f03',
                    fillOpacity: 0.5
                }).addTo(mymap);
            });
        }

        // 确保DOM加载完成后执行地图初始化
        $(document).ready(function() {
            map();
        });
    </script>
</body>
</html>

关键修复点 #

• 添加上Leaflet和jQuery的核心依赖，确保地图能正常渲染
• 使用$(document).ready()确保DOM加载完成后再初始化地图和绑定事件
• 统一输入事件处理逻辑，避免重复绑定，确保输入框值双向同步
• 初始set值与输入框默认值保持一致，避免初始圆形与输入值不符

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