如何使用原生JavaScript读取外部API返回的JSON数组并提取经纬度

报错原因分析 #

你遇到的报错是因为JSON.parse()没有传入待解析的字符串参数，默认传入了undefined，解析时读取到undefined的首字符u不符合JSON语法，所以抛出该错误。除此之外你的代码还有两个核心问题：

• 只存储了API地址，没有实际发送网络请求获取接口返回的JSON数据
• 字段遍历路径完全错误，你需要的Longitude和Latitude存放在GetRouteSummaryForStopResult.Routes.Route.Trips.Trip数组中，和RouteNo字段无关

正确实现步骤 #

1. 发送网络请求获取接口数据 #

使用原生fetch API发起请求，拿到返回的JSON字符串后自动解析为JS对象

2. 遍历目标数组提取经纬度 #

定位到Trip数组后遍历每一项，提取对应的经纬度字段即可

完整可运行代码 #

function on_page_ld() {
  // 替换为你的实际API地址
  const apiUrl = "api.example.com/api_name/?key=abcdefg12345";
  
  // 发送GET请求获取数据
  fetch(apiUrl)
    .then(response => {
      // 校验请求是否成功
      if (!response.ok) {
        throw new Error(`请求失败，状态码：${response.status}`);
      }
      // 自动解析JSON为JS对象，不需要手动调用JSON.parse
      return response.json();
    })
    .then(jsonData => {
      // 定位到Trip数组
      const tripList = jsonData.GetRouteSummaryForStopResult.Routes.Route.Trips.Trip;
      // 遍历数组提取经纬度
      tripList.forEach((trip, index) => {
        const longitude = trip.Longitude;
        const latitude = trip.Latitude;
        console.log(`第${index+1}条行程的经纬度：`, longitude, latitude);
        // 这里可以插入你的地图标记点位逻辑
      });
    })
    .catch(error => {
      console.error('数据获取/解析失败：', error);
    });
}

注意事项 #

• 如果接口跨域，需要后端配置CORS允许你的域名访问
• 如果Route字段可能返回多个的情况，需要先判断Route是数组还是对象，再调整取值逻辑
• 经纬度可能为空字符串，标记点位前可以先做合法性校验，过滤无效数据

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