求助：基于Leaflet实现双位置选择器的解决方案

核心思路 #

把单位置选择器的逻辑封装成独立函数，每个选择器使用局部变量管理地图实例、标记点、输入关联，彻底避免多实例间的变量冲突——这也是你之前复制单地图代码功能异常的核心原因。

完整实现代码 #

<head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css">
    <style>
        .location-picker {
            margin-bottom: 20px;
        }
        .map-container {
            height: 300px;
            width: 100%;
            border: 1px solid #eee;
        }
        .input-group {
            margin-top: 10px;
            display: flex;
            gap: 10px;
        }
        .input-group input {
            flex: 1;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <!-- 第一个位置选择器 -->
    <div class="location-picker">
        <h3>起点位置</h3>
        <div id="map1" class="map-container"></div>
        <div class="input-group">
            <input type="text" id="location1-lat" placeholder="纬度">
            <input type="text" id="location1-lng" placeholder="经度">
        </div>
    </div>

    <!-- 第二个位置选择器 -->
    <div class="location-picker">
        <h3>终点位置</h3>
        <div id="map2" class="map-container"></div>
        <div class="input-group">
            <input type="text" id="location2-lat" placeholder="纬度">
            <input type="text" id="location2-lng" placeholder="经度">
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.js"></script>
    <script>
        // 瓦片图层配置（全局复用）
        const tilesURL = 'https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png';
        const mapAttrib = '&copy; OpenStreetMap, Tiles courtesy of Humanitarian OpenStreetMap Team';

        // 封装位置选择器创建函数
        function createLocationPicker(mapId, latInputId, lngInputId, initialCenter, initialZoom) {
            let map;
            let marker;

            // 初始化地图
            function initMap() {
                map = L.map(mapId, {
                    center: initialCenter,
                    zoom: initialZoom
                });
                L.tileLayer(tilesURL, {
                    attribution: mapAttrib,
                    maxZoom: 19
                }).addTo(map);
            }

            // 更新输入框值
            function updateInputs(latlng) {
                $(`#${latInputId}`).val(latlng.lat.toFixed(6));
                $(`#${lngInputId}`).val(latlng.lng.toFixed(6));
            }

            // 初始化
            initMap();

            // 地图点击事件：添加/移动标记
            map.on('click', function(ev) {
                if (marker) {
                    marker.setLatLng(ev.latlng);
                } else {
                    marker = L.marker(ev.latlng, { riseOnHover: true, draggable: true }).addTo(map);
                    // 标记拖拽事件
                    marker.on('drag', function(dragEv) {
                        updateInputs(dragEv.latlng);
                    });
                }
                updateInputs(ev.latlng);
            });
        }

        // 创建两个位置选择器实例
        createLocationPicker('map1', 'location1-lat', 'location1-lng', [-6.175, 106.827], 8);
        createLocationPicker('map2', 'location2-lat', 'location2-lng', [-6.175, 106.827], 8);
    </script>
</body>

关键改进点 #

• 局部变量隔离：每个选择器的map、marker都是函数内局部变量，不会互相覆盖
• 复用性强：通过函数参数可以快速创建N个位置选择器，只需传入不同的容器和输入框ID
• 输入格式化：用toFixed(6)保留6位小数，避免经纬度精度冗余
• UI优化：添加了基础样式，让两个选择器布局更清晰

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