如何显示openweathermap天气图标 [英] how to display openweathermap weather icon

问题描述

我正在使用openweathermap显示天气报告.一切工作正常，但图标存在问题. json响应代码为:

I am using openweathermap to display weather reports. Everything is working fine but there is a problem with the icon . The json response code are :

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
                )

        )

)

现在如何显示图标:[天气] [0] [图标] => 10d

Now how can I display the icon : [weather] [0] [icon] => 10d

10d是什么?如何获取图标的网址.

what is 10d & how can I got the url of the icon.

推荐答案

好吧，我知道一种使用jQuery的方法.

Well, I know an way using jQuery.

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

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

At the HTML above you see the unique thing missing is the src attribute, so let's fill it with some jQuery and JavaScript. You may create a variables to hold the icon code provided by the API like:

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

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

After it you should concatenate this var iconcode with the url that contains the icons, like:

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

最后，只需执行以下操作即可更改DOM中的src属性:

Finally just change src attribute in the DOM by doing this:

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

我希望这可以解决问题. :)

I hope this solve the issue. :)

这篇关于如何显示openweathermap天气图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！