问题描述
当浏览器检测到位置(通过允许位置使用纬度和经度)并且切换良好时,它工作得非常好。当我使用 API 获取城市温度的详细信息时它不起作用,它只为某些城市切换一次。对于某些城市,它运行良好,而对于某些城市,它仅以华氏度显示。
let loc =document.getElementById("location");
let tempicon=document.getElementById("temp-icon");
let tempvalue=document.getElementById("temp-value");
let climate =document.getElementById("climate");
let iconfile;
let tempunit = document.getElementById("temp-unit");
let tempSection=document.querySelector('.temp-section');
const searchInput=document.getElementById("search-input");
const searchButton=document.getElementById("search-button");
//Accept the City
searchButton.addEventListener('click',(e)=>
{
e.preventDefault();
getWeather(searchInput.value);
searchInput.value='';
});
//Celsius to Fahrenheit
function celsiusToFahrenheit (temperature){
return (temperature *9/5)+32;
}
// for any particular city
const getWeather=async (city)=>
{
try{
const response= await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid={key}`,{mode: 'cors'}
);
const weatherData= await response.json();
console.log(weatherData);
const{name}=weatherData;
const{feels_like}=weatherData.main;
const{id,main}=weatherData.weather[0];
loc.textContent=name;
climate.textContent=main;
tempvalue.textContent=Math.round(feels_like-273).toFixed(2);
tempSection.addEventListener('click',function() {
if(tempunit.textContent === "°C"){
let fahrenheit = (celsiusToFahrenheit(feels_like-273)).toFixed(2);
tempunit.textContent="F";
tempvalue.textContent=fahrenheit;
}else{
tempunit.textContent="°C";
tempvalue.textContent=(feels_like-273).toFixed(2);
}
});
}
catch(error)
{
alert('city not found');
}
};
<!DOCTYPE html>
<html>
<title>Weather app</title>
<head>
<link rel="stylesheet" href ="../assets/css/Weather_app.css">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<form id="search-form">
<input type="search"
placeholder="Enter City Name"
id="search-input"
required
autocomplete="off"
/>
<br>
</br>
<button id="search-button">Search</button>
</form>
<main id="app-container">
<div id="location">
<p>-------</p>
</div>
<div id="temp">
<img id="temp-icon" src="../assets/Images/weather_icons/sun.svg" alt="">
<div class="temp-section"><span id="temp-value">-----</span> <span id="temp-unit" >°C</span> </div>
</div>
<div id="climate">
<p>------</p>
</div>
</main>
<script src="../assets/js/Weather_app.js">
</script>
</body>
</html>
解决方法
温度有华氏、摄氏和开尔文单位。 风速以英里/小时和米/秒为单位。
对于以华氏度为单位的温度和以英里/小时为单位的风速,请使用单位=英制 对于以摄氏度为单位的温度和以米/秒为单位的风速,请使用单位=公制 默认使用以开尔文为单位的温度和以米/秒为单位的风速,因此如果需要,无需在 API 调用中使用单位参数
例如:单位=英制
sudo apt-get install openjdk-7-jdk