web-dev-qa-db-ja.com

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
                )

        )

)

今、どのようにアイコンを表示できますか：[天気] [0] [アイコン] => 10d

10dとは何ですか？アイコンのURLを取得するにはどうすればよいですか。

htmljsonopenweathermap
9
Ajay Krishna Dutta

さて、jQueryの使用方法を知っています。

  <div id="icon"><img id="wicon" src="" alt="Weather icon"></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);

これで問題が解決することを願っています。 :)

21
samu101108

このリンクからOpenWeatherMap APIアイコンを取得できます。このリンクで下に太字で示されているアイコンIDをモデレートするだけです。必要なアイコンIDで「10d」を変更できます。 http://openweathermap.org/img/w/10d.png

詳細については、こちらをご覧ください OpenWeatherMap Icons

8
Mukhammad Ali

どうもありがとうございました！私は非常に初期のFlutterプログラマであり、Weatherappにアイコンを表示したかったのです。もちろん、Angela Yuと一緒に作成しました。

Flutterでこれを行いました。

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

そして、それを表示したかったのですか？

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

私はいつかこれで誰かを助けることができると思います。そして...もっと簡単な方法があれば、私は聞きたいです！

0
Margriet