Question

我一直在努力建立一个显示用户当地天气的网站。一切正常，事实上，如果你想swich单位，浏览器再次要求你分享你的位置，我认为有人可能会发现这很烦人。我该如何解决这个问题？这是代码：

var la;
var lg;
var celsius=1;
var tempChange;

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

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

 var url="https://fcc-weather-api.glitch.me/api/current?lat=" + la + "&lon=" + lg;

 fetch(url)
  .then((resp) => resp.json())
  .then(function(data) {
    if(celsius===1)
     document.getElementById("temper").innerHTML="Temperature:" + data.main.temp + " °C";
    else
     document.getElementById("temper").innerHTML="Temperature:" + (data.main.temp * 1.8 + 32) + " °F";
    document.getElementById("image").src=data.weather[0].icon;
   })
  .catch(function(error) {
    console.log("error: " + error);
   });
}

getLocation();

function change() {
  if(celsius===0)
   celsius=1;
  else
   celsius=0;
  getLocation();
}

这是一个包含完整HTML和CSS代码的jsfiddle，但不知何故，切换按钮不起作用：https://jsfiddle.net/1pvjrw3n/。通常，浏览器会再次询问您的位置，然后更改显示的温度。每次要切换单位时都会发生这种情况。

Answer 1

只需重复使用位置数据，只有在之前没有保存时才会询问它。如果您在两个小点更改代码，则可以实现此目的

第一

function showPosition(position) {
  if(!position && (!la || !lg)) getLocation();
  if(position) {
    la = position.coords.latitude;
    lg = position.coords.longitude;
  }

  var url="https://fcc-weather-api.glitch.me/api/current?lat=" + la + "&lon=" + lg;
...

如果没有位置数据作为第一个参数且未设置la或lg，请从浏览器api获取位置。如果设置了位置数据，则将此数据保存在la和lg中以备将来使用。

和第二：

function change() {
  if(celsius===0)
    celsius=1;
  else
    celsius=0;
  showPosition(); // instead of getLocation
}

您每次都会调用showPosition而不是直接调用getLocation。 showPosition查看位置数据并决定是否有必要调用getLocation。

这是工作fiddle

Answer 2

而不是将你的onclick放在你的Html中。

最好的地方是你的javascript，因为它可能是一个模块。等

因此，请从HTML中删除onclick，并将其放入您的javascript ..

document.querySelector('#button').onclick = change;

如何使用javascript在我的天气应用程序中将单位从摄氏温度更改为华氏温度？

2 个答案: