Leaflet.js如何飞至存储在变量中的指定坐标？

你的问题出在传给map.flyTo的参数类型错误：你拼接出的kordinate是字符串（比如"[43.855202,18.417892]"），但Leaflet的flyTo方法第一个参数要求是包含两个数字的数组（[纬度, 经度]），字符串格式无法被识别。

修改后的代码 #

替换你点击事件内的坐标处理逻辑：

Listen(document).on('click', '.btn', function (e) {
    idoffire = e.target.id - 100;
    // 获取坐标字符串并去除首尾空白
    const coordStr = document.getElementById(idoffire).innerHTML.trim();
    // 按空格分割字符串，再转成数字数组
    const kordinate = coordStr.split(/\s+/).map(Number);
    
    // 验证坐标有效性，避免错误
    if (kordinate.length === 2 && !isNaN(kordinate[0]) && !isNaN(kordinate[1])) {
        map.flyTo(kordinate, 18);
    } else {
        console.error('无效的坐标格式，请检查DOM中的内容:', coordStr);
    }
});

关键说明 #

1. trim()：去除坐标字符串首尾的换行、空格等冗余字符，避免分割出错
2. split(/\s+/)：用正则匹配任意数量的空格分割字符串，即使坐标间有多个空格也能正确拆分
3. map(Number)：把分割后的字符串元素转换成数字类型，得到Leaflet需要的数字数组
4. 有效性验证：防止DOM中内容格式错误导致地图报错

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