Question

我想建立一个显示当地温度的网站，使用浏览器的导航功能获取坐标，但似乎当我调用天气api时，我没有得到任何数据。我使用的api就是这个：https://fcc-weather-api.glitch.me/

var la;
var lg;

function getLocation() {
 if (navigator.geolocation)
  navigator.geolocation.getCurrentPosition(showPosition); 
}

function showPosition(position) {
 la= position.coords.latitude;
 lg= position.coords.longitude;
}

getLocation();

var url="https://fcc-weather-api.glitch.me/api/current?lat=" + la + "&lon=" + lg;
fetch(url)
 .then((resp) => resp.json())
 .then(function(data) {
   let api = data.main;
   return authors.map(function(api) {
    document.getElementById("temper").innerHTML=api.temp;
   })
 })

这是一个jsfiddle：https://jsfiddle.net/9cLkjg5e/

Answer 1

不确定您要对authors.map位做什么，但没有必要。 fetch返回的数据对象的温度为data.main.temp;

所以基本上改为这将修复你的代码

document.getElementById("temper").innerHTML = api.temp;

修正了js：

var la;
var lg;
function getLocation() {
  if (navigator.geolocation)
    navigator.geolocation.getCurrentPosition(showPosition); 
    
}
function showPosition(position) {
  la= position.coords.latitude;
  lg= position.coords.longitude;
  //document.getElementById("temper").innerHTML="Latitude:" + la;
 // document.getElementById("icon").innerHTML="Longitude:" + lg;
}
getLocation();

var url="https://fcc-weather-api.glitch.me/api/current?lat=" + la + "&lon=" + lg;
fetch(url)
  .then((resp) => resp.json())
  .then(function(data) {
    let api = data.main;
    document.getElementById("temper").innerHTML = api.temp;
  })
  .catch(function(error) {
    console.log("error: " + error);
  });

<div class="container">
  <center><h1 id="header">Weather App</h1></center>
</div>

<div class="container">
  <p id="temper"></p>
</div>

Answer 2

在旁注中，API调用时未填充变量la和lg。您可以通过在getCurrentPosition（）的成功回调中执行API调用来解决此问题。

无法从api获取数据

2 个答案: