使用 JSON 渲染数据（天气 API）

Posted 2023-02-23

【中文标题】使用 JSON 渲染数据（天气 API）

【英文标题】：rendering data with JSON (weather API)

【发布时间】：2016-08-06 07:40:49

【问题描述】：

我从 JSON 开始，尝试使用 Open Weather Map 的 API 实现一个天气应用程序。我正在尝试根据用户的坐标将键“name”的值返回到<h2 id="city"></h2>，但我不确定为什么它目前没有返回任何东西。我知道有人问过类似的问题before，但我不确定这在这种情况下如何应用。

$(document).ready(function() 
  if (navigator.geolocation) 
    navigator.geolocation.getCurrentPosition(function(position) 
      var lati = position.coords.latitude;
      var longi = position.coords.longitude;
      var address = "api.openweathermap.org/data/2.5/weather?lat=" + lati +"&lon=" + longi + "&APPID=*****";

      $.getJSON(address, function(json) 
        $("#city").html(json["name"]);
      );
    );
  
);

【问题讨论】：

在下面查看我的答案。

【参考方案1】：

使用http://api.openweather... 之类的网址代替api.openweather...

否则浏览器会认为它是一个相对地址并尝试像http://example.com/api.openweather...一样打开它，假设页面url是http://example.com。

其余的似乎工作。我添加了 http:// 前缀并用我的替换了 API 密钥，代码在我的环境中按预期工作。

【讨论】：

感谢您的提醒！我正在 codepen 上尝试，但没有看到任何变化。

@gonzalo2000 可能无法在 codepen 中工作，navigator 权限问题？你得到许可提示了吗？

好点。不，我没有收到许可提示。这是我可以在代码中说明的问题，还是有其他类似的服务可以工作？

没有机会。 Navigator 是 chrome 开发团队所说的“强大功能”，只能从 https 和 localhost 访问，即安全源。 codepen 以及这里的代码运行器都是沙箱，因此无法正常工作！看到这个：sites.google.com/a/chromium.org/dev/Home/chromium-security/…

知道了。谢谢你的帮助——知道我在正确的轨道上仍然是一种解脱。我将通过我的编辑来解决这个问题。