如何显示openweathermap天气图标

Question

我正在使用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&我如何获得图标的网址.

Answer 1

好吧,我知道使用jQuery的方法.

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

在上面的HTML中你看到缺少的唯一东西是src属性,所以让我们用一些jQuery和JavaScript填充它.您可以创建一个变量来保存API提供的图标代码,如:

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

在它之后你应该将这个var图标代码与包含图标的url连接起来,例如:

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

最后,通过执行以下操作来更改DOM中的src属性:

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

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

Answer 2

您可以通过此链接获取OpenWeatherMap API图标。您所要做的就是调整此链接下面以粗体显示的图标ID。您可以使用所需的任何图标ID更改“ 10d”。 http://openweathermap.org/img/w/10d.png

有关更多信息，您可以在这里阅读OpenWeatherMap图标

Answer 3

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

1-在您的程序中包含“icons”文件： openweatherAPI Icons 集成

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">;

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

Answer 4

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

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

Answer 5

图标的 src 将是这样的：

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

见天气图标