如何使用JavaScript从嵌套JSON文件中提取瑞士充电桩的Google地理坐标

实现方案 #

你需要通过fetchAPI加载外部JSON文件，解析后按照JSON的嵌套结构提取目标坐标即可，具体实现如下：

完整代码示例

async function loadChargingStationData() {
  try {
    // 加载JSON文件，此处路径根据你的文件实际存放位置调整
    const res = await fetch('./ladestationen_schweiz.json');
    if (!res.ok) throw new Error('文件加载失败，请检查路径配置');
    const stationData = await res.json();
    
    // 按层级提取Google坐标：EVSEDataRecord数组第1项 → GeoCoordinates对象 → Google属性
    const googleGeo = stationData.EVSEDataRecord[0].GeoCoordinates.Google;
    // 输出测试，可自行替换为页面渲染逻辑
    console.log('提取到的坐标：', googleGeo);
    
    // 如需处理多个充电桩数据，可遍历数组批量提取
    // const allGoogleGeo = stationData.EVSEDataRecord.map(item => item.GeoCoordinates.Google);

    return googleGeo;
  } catch (err) {
    console.error('操作失败：', err);
  }
}

// 调用执行
loadChargingStationData();

注意事项

• 直接本地双击打开HTML文件会触发浏览器跨域限制，导致JSON请求失败，建议用本地服务启动测试：
  • VS Code安装Live Server插件，右键HTML文件选择Open with Live Server即可启动
  • 项目目录下执行python -m http.server（需Python环境），访问http://localhost:8000 即可测试
• 如果JSON文件存放在其他目录，修改fetch参数中的文件路径即可

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