如何解析URL返回JSON中的坐标数据并应用于Mapbox开发

你之前的写法错误主要有两点：

• 数组索引从0开始计数，你示例中的location数组仅包含1个元素，正确下标为0而非1
• 解构赋值没有对应JSON的嵌套层级，无法直接提取到深层的coordinates字段

方案1：链式层级取值（可读性更高，推荐新手使用） #

async function getLocation(updateSource) {
  try {
    const response = await fetch(
      'http://localhost/data.json', 
      { method: 'GET' }
    );
    const resData = await response.json();
    // 按JSON结构逐层取值
    const coordinates = resData.location[0].geometry.coordinates;
    const longitude = coordinates[0];
    const latitude = coordinates[1];

    map.flyTo({
      // Mapbox的center参数顺序本身就是[经度, 纬度]，和coordinates前两位顺序一致
      center: [longitude, latitude],
      essential: true
    });
  } catch (error) {
    // 可自定义异常处理逻辑
    console.error('位置数据加载失败：', error);
  }
}

方案2：嵌套解构赋值写法 #

如果你想直接用解构赋值提取字段，可以按JSON层级写解构规则：

async function getLocation(updateSource) {
  try {
    const response = await fetch(
      'http://localhost/data.json', 
      { method: 'GET' }
    );
    // 嵌套解构直接提取坐标数组
    const { location: [ { geometry: { coordinates } } ] } = await response.json();
    // 数组解构拆分经纬度
    const [longitude, latitude] = coordinates;

    map.flyTo({
      center: [longitude, latitude],
      essential: true
    });
  } catch (error) {
    console.error('位置数据加载失败：', error);
  }
}

注意事项 #

生产环境建议增加边界判断，避免location数组为空时抛出异常：

if (resData.location?.length) {
  const coordinates = resData.location[0].geometry.coordinates;
  // 后续逻辑
}

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