web-dev-qa-db-fra.com

comment afficher l'icône météo openweathermap

J'utilise openweathermap pour afficher les rapports météorologiques. Tout fonctionne bien mais il y a un problème avec l'icône. Le code de réponse json est:

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
                )

        )

)

Maintenant, comment puis-je afficher l'icône: [météo] [0] [icône] => 10j

qu'est-ce que 10d et comment puis-je obtenir l'url de l'icône.

htmljsonopenweathermap
9
Ajay Krishna Dutta

Eh bien, je connais un moyen d'utiliser jQuery.

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

Dans le code HTML ci-dessus, vous voyez que la seule chose qui manque est l'attribut src, alors remplissons-le avec jQuery et JavaScript. Vous pouvez créer des variables pour contenir le code d'icône fourni par l'API comme:

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

Après cela, vous devez concaténer ce var iconcode avec l'url qui contient les icônes, comme:

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

Enfin, changez simplement l'attribut src dans le DOM en procédant comme suit:

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

J'espère que cela résoudra le problème. :)

21
samu101108

Vous pouvez obtenir des icônes API OpenWeatherMap via ce lien. Tout ce que vous devez faire est de modérer l'identifiant de l'icône indiqué en gras ci-dessous dans ce lien. Vous pouvez changer "10d" avec n'importe quel identifiant d'icône dont vous avez besoin. http://openweathermap.org/img/w/10d.png

Pour plus d'informations, vous pouvez lire ici Icônes OpenWeatherMap

8
Mukhammad Ali

Merci beaucoup à tous! Je suis un programmeur Flutter très débutant et je voulais afficher l'icône dans Weatherapp, nous avons fait un cours avec Angela Yu.

Je l'ai fait dans Flutter:

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

et puis je voulais qu'il s'affiche, j'ai fait:

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

J'espère pouvoir un jour aider quelqu'un avec ça. Et ... s'il y a un moyen plus simple, j'aimerais bien entendre!

0
Margriet