Leaflet JS问题：修改IP地址后地图无法拖拽

每次搜索IP时，你都在同一个容器内重新创建Leaflet地图实例，同时通过修改容器的_leaflet_id绕过初始化错误。这种操作会导致旧地图的事件监听器未被正确清理，新旧实例的交互逻辑冲突，最终造成地图无法拖拽。

复用地图实例（或正确更新现有地图内容），而非每次重新创建。以下是修改后的代码：

let IP_ADDRESS = document.querySelector('.ip-address');
let loc = document.querySelector('.ip-location');
let timezone = document.querySelector('.ip-timezone');
let isp = document.querySelector('.ip-isp');
// 全局声明地图和标记变量，方便复用
let map = null;
let marker = null;

function SearchIp(e, ipAddress){
    // 处理页面加载时的事件（此时e可能为undefined）
    if(e) e.preventDefault();

    const userInputIp = document.querySelector('#user-input')?.value;
    const key = 'at_i2aWTD38COX3urd2INjt8nvY6Sm3I';

    fetch(`https://geo.ipify.org/api/v1?apiKey=${key}&ipAddress=${userInputIp ? userInputIp : ''}`)
    .then((res) => res.json())
    .then((data) => {
        // 更新页面信息
        IP_ADDRESS.innerText = data.ip;
        loc.innerText = `${data.location.city !== "" ? data.location.city + ', ' : "N/A"}${data.location.country || "N/A"}`;
        timezone.innerText = `${data.location.timezone !== "" ? `UTC ${data.location.timezone}` : "N/A"}`;
        isp.innerText = data.isp !== "" ? data.isp : "N/A";

        const latLng = [data.location.lat, data.location.lng];

        // 如果地图已存在，更新视图和标记
        if(map){
            // 移除旧标记
            if(marker){
                map.removeLayer(marker);
            }
            // 更新地图中心位置
            map.setView(latLng, 13);
            // 添加新标记
            marker = L.marker(latLng).addTo(map);
        } else {
            // 首次加载，初始化地图
            map = L.map('map').setView(latLng, 13);
            marker = L.marker(latLng).addTo(map);

            L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 19,
                attribution: '© OpenStreetMap'
            }).addTo(map);
        }
    })
    .catch(err => {
        console.error('获取IP信息失败:', err);
    });
}

document.querySelector('#search').addEventListener('submit', SearchIp);
window.addEventListener('load', (e) => SearchIp(e));

• 将map和marker变量提升到全局，避免每次搜索都创建新地图实例
• 新增地图实例判断逻辑：已初始化时仅更新视图和标记，未初始化时才创建新地图
• 修复页面加载时的事件处理bug（原代码直接调用e.preventDefault()会报错）
• 优化位置信息渲染逻辑，简化重复判断
• 添加错误捕获，便于调试过程排查问题

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