API调用异常：获取经纬度后调用Google API无结果

看起来你遇到的核心问题有两个：一是原代码里完全没加Google地理编码API的调用逻辑，二是就算加上，也得注意fetch的异步特性，还有API权限、跨域这些常见坑。下面给你整理了修正后的完整方案：

修正后的可运行代码 #

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(position => {
    const lat = position.coords.latitude;
    const long = position.coords.longitude;
    
    // 先调用Darksky天气API
    const darkskyApi = `https://cors.io/?https://api.darksky.net/forecast/你的Darksky密钥/${lat},${long}`;
    fetch(darkskyApi)
      .then(response => {
        if (!response.ok) {
          throw new Error(`Darksky请求失败: ${response.status}`);
        }
        return response.json();
      })
      .then(data => {
        console.log('Darksky返回数据:', data);
        const { temperature } = data.currently;
        const celsius = (temperature - 32) * (5/9);
        alert(`当前温度: ${celsius.toFixed(2)}℃`);
        
        // Darksky请求完成后，紧接着调用Google地理编码API
        const googleGeoApi = `https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${long}&key=你的Google密钥`;
        return fetch(googleGeoApi);
      })
      .then(response => {
        if (!response.ok) {
          throw new Error(`Google请求失败: ${response.status}`);
        }
        return response.json();
      })
      .then(geoData => {
        console.log('Google地理编码返回数据:', geoData);
        // 从返回结果中提取城市名称（根据Google API的返回结构调整）
        const city = geoData.results[0].address_components.find(item => 
          item.types.includes('locality')
        ).long_name;
        alert(`当前所在城市: ${city}`);
      })
      .catch(error => {
        console.error('请求出错:', error);
        alert('数据获取失败，请检查API密钥或网络连接');
      });
  }, error => {
    console.error('获取地理位置失败:', error);
    alert('无法获取你的位置，请开启浏览器定位权限');
  });
} else {
  alert('你的浏览器不支持地理定位功能');
}

关键注意点 #

• API密钥配置：
  • 替换代码里的你的Darksky密钥和你的Google密钥为真实密钥；
  • 确保Google密钥已经开启了地理编码API权限，并且设置了正确的域名访问限制（避免密钥被盗用）。
• 异步流程控制：
  • 通过在Darksky的then回调里返回Google的fetch请求，保证了两个API的调用顺序——只有Darksky请求完成后才会触发Google API调用。
• 错误处理：
  • 新增了全局catch块，能捕获地理位置获取失败、API请求失败等所有异常，方便你排查问题。
• 跨域问题：
  • Google地理编码API支持浏览器直接调用（只要密钥配置正确），不需要额外CORS代理；如果遇到跨域错误，优先检查密钥的域名限制是否正确。

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