如何显示openweathermap天气图标

新手上路,请多包涵

我正在使用 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?

原文由 Ajay Krishna Dutta 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 1.2k
1 个回答

我必须承认有点晚了。我现在在大学,我和你有同样的经历,我不知道如何让图标工作。

但是,大学的一个人很友善地给了我帮助,我非常感谢。

因此,在您的 Javascript 中,您输入:

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

在您的 HTML 中,您输入:

 <img id="icon" src = "" alt = "Weather icon">

希望这对与我处于相同情况的人有所帮助:)

谢谢!

原文由 Josh Smith 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题