JavaScript中数据库数据转Leaflet所需二维数组失败求助

我一眼就看出问题出在哪了——你现在用字符串拼接再拆分的方式生成的不是真正的二维数组，而是一堆字符串组成的数组，难怪循环里只能拿到单个字符！

问题根源分析 #

你原来的代码是把每个位置拼成带逗号和方括号的字符串，然后用|分隔再split，最后得到的locations其实是一个字符串数组，比如每个元素可能是"[LOCATION_1",11.8166,122.0942],"（还不说你字符串拼接里的引号写错了）。当你用locations[i][1]的时候，其实是在取这个字符串的第2个字符，自然不是你想要的坐标值。

修正后的代码 #

直接操作数组就好，别绕弯子用字符串拼接：

// 直接初始化locations为一个空数组
var locations = [];
for (var i = 0; i < obj.length; i++) {
    // 把每个位置的信息作为子数组push进去
    locations.push([
        obj[i].Location,
        parseFloat(obj[i].x), // 确保是数字类型，避免字符串坐标导致Leaflet出错
        parseFloat(obj[i].y)
    ]);
}

为什么这样可行？ #

• 我们直接创建了真正的二维数组，每个元素都是包含位置名称、纬度、经度的子数组，和你硬编码的格式完全一致。
• 用parseFloat把x和y转换成数字类型（如果数据库返回的是字符串的话），Leaflet的marker需要数字类型的坐标，能避免潜在的渲染错误。

验证你的Leaflet代码 #

现在再用你原来的标记创建代码，就能正常工作了：

for (var i = 0; i < locations.length; i++) { 
    marker = new L.marker([locations[i][1], locations[i][2]], { icon: iconColor(color) }) 
        .bindPopup(locations[i][0]) 
        .bindTooltip(locations[i][0], { permanent: true, direction: 'right' } ) 
        .addTo(map);
}

另外提一句，你原来的字符串拼接里还有语法错误：'['+obj[i].Location + '"' + ','这里多了一个双引号，会导致生成的字符串格式混乱，这也是问题之一，但核心还是不该用字符串来模拟数组结构。

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