如何显示openweathermap天气图标

Posted 2023-02-23

技术标签:

【中文标题】如何显示openweathermap天气图标【英文标题】：How to display openweathermap weather icon 【发布时间】：2017-10-25 22:07:15 【问题描述】：

我正在使用 openweathermap 来显示天气报告。一切正常，但图标有问题。 JSON 响应代码为：

Array
(
    [city] => Array
        (
            [id] => 1271476
            [name] => Guwahati
            [coord] => Array
                (
                    [lon] => 91.751
                    [lat] => 26.1862
                )

            [country] => IN
            [population] => 899094
        )

    [cod] => 200
    [message] => 0.0630711
    [cnt] => 1
    [list] => Array
        (
            [0] => Array
                (
                    [dt] => 1495688400
                    [temp] => Array
                        (
                            [day] => 33
                            [min] => 24.89
                            [max] => 33.82
                            [night] => 24.89
                            [eve] => 30.6
                            [morn] => 33
                        )

                    [pressure] => 1013.02
                    [humidity] => 90
                    [weather] => Array
                        (
                            [0] => Array
                                (
                                    [id] => 500
                                    [main] => Rain
                                    [description] => light rain
                                    [icon] => 10d
                                )

                        )

                    [speed] => 3.92
                    [deg] => 88
                    [clouds] => 24
                    [rain] => 2.73
                )

        )

)

现在如何显示图标：[weather][0][icon] => 10d？

10d 是什么？如何获取图标的 URL？

【问题讨论】：

jsfiddle.net/deep3015/e3rLe693/4 从您已删除的问题中检查此内容 【参考方案1】：

您的 html 文件：

<div class="weather">
  <form class="weather-form">
    <input type="text" class="city-name">
    <input type="submit">
  </form>
  <img src="" class="iconurl">
</div>

你的 JS 文件：

// hit API

const getWeather = async (cityname) => 
  let response = await fetch('https://api.openweathermap.org/data/2.5/weather?q=' + cityname + '&appid=$API KEY') //you get your api key once you sign up for openweathermap.org
  return response.json()


// DOM

const weatherContainer = document.querySelector('.weather')
const weatherForm = document.querySelector('.weather-form')
const iconurl = document.querySelector('.iconurl')

// Event Listener

weatherForm.addEventListener('submit', (e) => 
  e.preventDefault()

  const cityInput = document.querySelector('.city-name')

  getWeather(cityInput.value).then(c => 
    c.weather.forEach(ww => 
      let url = "http://openweathermap.org/img/w/" + ww.icon + ".png"
      iconurl.src = url
    )
  )
)

【讨论】：

请添加一些可能的信息/解释它的工作原理，而不是仅仅回答这个问题。解释有助于理解和有用的类似问题【参考方案2】：

嗯，我知道一种使用 jQuery 的方法。

  <div id="icon"><img id="wicon" src="" ></div>

在上面的 HTML 中，您看到唯一缺少的是 src 属性，所以让我们用一些 jQuery 和 javascript 来填充它。您可以创建一个变量来保存 API 提供的图标代码，例如：

        var iconcode = a.weather[0].icon;

之后，您应该将此 var iconcode 与包含图标的 url 连接起来，例如：

        var iconurl = "http://openweathermap.org/img/w/" + iconcode + ".png";

最后只需通过以下方式更改 DOM 中的 src 属性：

        $('#wicon').attr('src', iconurl);

我希望这能解决问题。 :)

【讨论】：

【参考方案3】：

这就是我所做的，它对我有用。你看，从响应对象映射通过它和结果访问图标如下

<img src="http://openweathermap.org/img/w/$result.icon.png" >

【讨论】：

【参考方案4】：

const icon = `https://openweathermap.org/img/wn/$weather[0]["icon"]@2x.png`;

const li = document.createElement("li");
    li.classList.add("city");
       const markup = `
          <figure>
              <img class="city-icon" src=$icon alt=$weather[0]["main"]>
              <figcaption>$weather[0]["description"]</figcaption>
          </figure>
                `;
li.innerHTML = markup;

【讨论】：

【参考方案5】：

我想你在问 IconCode

https://openweathermap.org/ 转换成图片

例如 02n =>img

所以，如果这就是你想要的，那么：

'02n'

更多图片代码信息请到link

【讨论】：

谢谢。我的答案有很多改进，我对你的帮助感到非常高兴??【参考方案6】：

这个答案是针对安卓的，所以在挣扎了几个小时后，我终于弄清楚了如何从 openweathermap api 显示图标。

The URL is https://openweathermap.org/img/w/$icon_id.png

只需输入您从 API 获得的图标 ID，您就会得到结果。我遇到的常见错误是：

不使用 https，因为我使用的是 http，但它不起作用

您还可以使用以下方法获得更大尺寸的图像：

 url - https://openweathermap.org/img/wn/$icon_id@4x.png

icon_id 示例：04d、10d

工作回复：https://openweathermap.org/img/wn/04d@4x.png

【讨论】：

【参考方案7】：

ExpressJS：首先获取图标： const icon = weather.weather[0].icon;

第二： iconurl=http://openweathermap.org/img/wn/$icon.png;

第三： " >

【讨论】：

请查看这里以了解如何在 *** 上写出好的答案：***.com/help/how-to-answer【参考方案8】：

http://openweathermap.org/img/wn/$weatherData.weather[0].icon@2x.png

要在网页上显示此内容，您只需将其添加到 img 标记的 src 属性即可。

这就是获取图标的 URL 的样子...... 其中weatherData 是您从对 OPENWEATHERMAP 进行的 API 调用中获得的数据。它采用 JSON 格式。你需要解析。

【讨论】：

【参考方案9】：

您可以通过此链接获取 OpenWeatherMap API 图标。您需要做的就是调整此链接下方以粗体给出的图标 ID。您可以使用您需要的任何图标 ID 更改 10d。

http://openweathermap.org/img/w/10d.png

更多信息，你可以在这里阅读OpenWeatherMap Icons

【讨论】：

【参考方案10】：

图标的源代码是这样的：

http://openweathermap.org/img/wn/10d@2x.png

见Weather icons

【讨论】：

【参考方案11】：

这段代码在 React Native 中适用于我：

const icon = wInfo.weather[0].icon; // For instance "09d"
<Image source= uri: ``http://openweathermap.org/img/w/$icon.png``  />

【讨论】：

【参考方案12】：

对于反应，你可以这样使用：

第一步：初始化空白状态

constructor()
    super()
        this.state=
            icon:''

第二步：api调用

async componentDidMount()
            const url = 'http://api.openweathermap.org/data/2.5/'
            const key = 'your api key'
            const response = await fetch(`$urlweather?q=Guwahati&units=metric&APPID=$key`)
            const data = await response.json() //this will return the json response
            const iconName = data.weather[0].icon // this will hold the icon
            const iconApi = await fetch('http://openweathermap.org/img/w/' + iconName + '.png')
            this.setState(
                icon : iconApi.url
            )

第 3 步：显示图标

    <div className="weather-icon">
         <img style=width:'70px' src= this.state.icon />
    </div>

【讨论】：

【参考方案13】：

这里 d 指的是白天，就像 n 指的是夜晚。并且根据天气状况，它会发生变化，例如03d 为散云，01d 为晴空等。在这里，您将获得这些图标的完整列表https://openweathermap.org/weather-conditions#How-to-get-icon-URL

【讨论】：

【参考方案14】：

所以我花了很多时间来解决这个问题。此答案适用于纯 HTML 和 JavaScript，如果您不想使用 jquery。

1- 在您的程序中包含“图标”文件： openweatherAPI Icons integration

2- 在你的 index.html 中：

<div class="weather-icon"><img src="icons/unknown.png" /></div>

3- 在您的 JavScript 文件中（在您的 JS 代码中执行以下 3 个步骤）：

第一步：let locationIcon = document.querySelector('.weather-icon');

第二步：const icon = data.weather[0];

第三步（不是代码格式，因为它使反引号部分消失）： locationIcon.innerHTML = <img src="icons/$icon.png">;

对我来说工作得很好。快乐的建筑。

【讨论】：

我一直在努力理解你的第 3 步.. 但最后我发现它可以正常工作，谢谢是的，我确定您说的是 3 中的第 3 步。我仍然不确定 *** 上的代码插入功能是否允许您使用我们通常在 JavaScript 中使用的反引号键入代码。第三步的第三部分需要 HTML 图像元素的反引号。像这样locationIcon.innerHTML = `<img src="icons/$icon.png">;`在设置JS的第三部分中，第2步不应该在第1步之前吗？因为icon的变量需要先初始化。我还建议对代码的“第二步”进行编辑以更改为 const icon = data.weather[0].icon，因为它是一个数组，其中包含我们试图获取的对象和图标属性。【参考方案15】：

这对我有用！

创建变量以访问 javascript 和 HTML 之间的数据。 var var1 = document.querySelector('idhere') //你必须使用父类/id

从 JASON 处获取图标 var tempvariable = data['weather'][0]['icon'];

将链接与 html 标记一起传递给 html var1.innerHTML = "http://openweathermap.org/img/w/" +tempvariable+ ".png' alt='描绘当前天气的图标。'>"

或

var1.innerHTML = "http://openweathermap.org/img/w/" +data['weather'][0]['icon']+ ".png' alt='图标描述当前天气。' >"// 如果使用此方法，则不需要第 2 步。

【讨论】：

【参考方案16】：

非常感谢大家！我是一个刚入门的 Flutter 程序员，想在 Weatherapp 中显示图标，我们在 Angela Yu 的课程中制作。

我在 Flutter 中做到了这一点：

String weerImageString;
weerImageString = weatherData['weather'][0]['icon'];

然后我想要它显示，我做到了：

Image.network('http://openweathermap.org/img/w/$weerImageString.png',),

我希望有一天我可以帮助某人。而且...如果有更简单的方法，我很想听听！

【讨论】：

以上是关于如何显示openweathermap天气图标的主要内容，如果未能解决你的问题，请参考以下文章

尝试显示我的应用的天气图标时遇到问题

我想显示从这个天气 API（https://openweathermap.org/current）获取的结果，但是当我输入城市名称时，我没有得到任何响应

如何使用 openweathermap api 和 http 包获取每小时和 16 天的天气预报

OpenWeatherMap 返回不正确的当前天气

如何找到天气预报城市ID？

python使用openweathermap API获取全世界主要城市天气信息