如何在Mapbox Feature中使用数据库获取的坐标字符串？

核心问题是后端返回的routeCoords是字符串类型，而非Mapbox要求的二维数组，再加上前端处理逻辑错误，导致坐标格式完全不匹配。

后端PHP修复 #

你当前的$pointArray是数据库取出的字符串（格式类似"[x1,y1],[x2,y2]"），直接json_encode后依然是字符串，Mapbox无法识别。需要先将字符串转为PHP数组再编码：

// 假设$pointArray是从数据库获取的坐标字符串
$jsonCoords = "[$pointArray]"; // 给字符串套外层[]，转为合法JSON数组格式
$coordsArray = json_decode($jsonCoords, true); // 转成PHP二维数组
$array["routeCoords"] = $coordsArray;
return json_encode($array);

修复后返回的JSON会变成：

{"routeCoords":[[0.05505231549481921,50.795082814869524],[0.054870226332090315,50.79614745729873]]}

这才是Mapbox能识别的嵌套数组格式。

前端代码修复 #

如果后端已经返回正确的数组，前端代码可以大幅简化，无需多余遍历：

const payload = await fetch(URL);
const data = await payload.json();

const route = {
    'type': 'FeatureCollection',
    'features': [
        {
            'type': 'Feature',
            'geometry': {
                'type': 'LineString',
                'coordinates': data.routeCoords // 直接用返回的数组
            }
        }
    ]
};

如果暂时无法修改后端，前端可以自行解析字符串：

const payload = await fetch(URL);
const data = await payload.json();

// 给字符串补全外层[]，解析为二维数组
const coords = JSON.parse(`[${data.routeCoords}]`);

const route = {
    'type': 'FeatureCollection',
    'features': [
        {
            'type': 'Feature',
            'geometry': {
                'type': 'LineString',
                'coordinates': coords
            }
        }
    ]
};

原代码失效原因 #

• 后端：直接将坐标字符串编码，导致返回的routeCoords是字符串而非数组；
• 前端：用$.each(data.routeCoords)遍历的是字符串的单个字符（比如[、0、.），最终生成的内容完全不是合法坐标格式，Mapbox自然无法识别。

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