如何在天气应用程序中显示 OpenWeatherMap 图标？

Question

我正在尝试使用 JavaScript 在我的天气应用程序中显示来自 OpenWeatherMap 的天气图标。

我试过使用 jQuery 和我在网上看到的其他解决方案。 我还尝试使用“src”属性指定此链接（“http://openweathermap.org/img/w/”），但该链接不起作用，结果图像损坏。

如何成功地将天气图标添加到我的应用程序中？

以下是用于制定此问题的一些最小代码。 我希望这有帮助。

HTML：

<div class="weather">
  <div id="date"></div>
  <div id="cityName"></div>
  <img src="" id="icon">
  <div id="temp"></div>
  <div id="description"></div>
</div>

JavaScript：

var d = new Date();
var n = d.toLocaleDateString();
document.getElementById("date").innerHTML = n;

function getWeather( cityID ) {
  var key = '535f8a50b4bc24608c72fcde2aecb52b';
  fetch('https://api.openweathermap.org/data/2.5/weather?id=' + cityID+ '&appid=' + key)  
  .then(function(resp) { return resp.json() }) 
  .then(function(data) {
    drawWeather(data);
  })
  .catch(function() {
    // catch any errors
  });
}

window.onload = function() {
  getWeather( 6167865 );
}

function drawWeather( d ) {
  var celcius = Math.round(parseFloat(d.main.temp)-273.15);
  var fahrenheit = Math.round(((parseFloat(d.main.temp)-273.15)*1.8)+32); 

  document.getElementById('cityName').innerHTML = d.name;
  document.getElementById('description').innerHTML = d.weather[0].description;
  document.getElementById('temp').innerHTML = fahrenheit + '°';
  document.getElementById('icon').src = "http://openweathermap.org/img/w/"+obj.weather[0].icon+".png";
 }

Answer 1

当您在 image src 属性中设置 url 时，将d.weather[0].icon替换为现有的。

 var d = new Date(); var n = d.toLocaleDateString(); document.getElementById("date").innerHTML = n; function getWeather( cityID ) { var key = '535f8a50b4bc24608c72fcde2aecb52b'; fetch('https://api.openweathermap.org/data/2.5/weather?id=' + cityID+ '&appid=' + key).then(function(resp) { return resp.json() }).then(function(data) { drawWeather(data); }).catch(function() { // catch any errors }); } window.onload = function() { getWeather( 6167865 ); } function drawWeather( d ) { var celcius = Math.round(parseFloat(d.main.temp)-273.15); var fahrenheit = Math.round(((parseFloat(d.main.temp)-273.15)*1.8)+32); document.getElementById('cityName').innerHTML = d.name; document.getElementById('description').innerHTML = d.weather[0].description; document.getElementById('temp').innerHTML = fahrenheit + '°'; document.getElementById('icon').src = `http://openweathermap.org/img/w/${d.weather[0].icon}.png`; }

 <div class="weather"> <div id="date"></div> <div id="cityName"></div> <img src="" id="icon"> <div id="temp"></div> <div id="description"></div> </div>

Answer 2

代替

document.getElementById('icon').src="http://openweathermap.org/img/w/"+obj.weather[0].icon+".png";

和

document.getElementById('icon').src="http://openweathermap.org/img/w/"+d.weather[0].icon+".png";

Answer 3

开放天气 API 文档给出了 url 访问图标。 要在网页上显示天气图标，请使用以下方法：

var iconCode = data.weather[0].icon; 
console.log(iconCode);
out_icon.innerHTML="<img 
src=http://openweathermap.org/img/wn/"+iconCode+"@2x.png>";

Answer 4

这是使用天气图标的文档： https://openweathermap.org/weather-conditions

在你的情况下，你可以改变

document.getElementById('icon').src = "http://openweathermap.org/img/w/"+obj.weather[0].icon+".png";

成为

document.getElementById('icon').src = "http://openweathermap.org/img/wn/"+ data.weather[0].icon +"@2x.png";