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] =＆gt; 10D

什么是10d＆amp;我怎样才能得到图标的网址。

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图标代码与包含图标的网址连接起来，例如：

        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 Icons

Answer 3

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

1- 在程序中包含“图标”文件： openweatherAPI Icons integration

2- 在您的index.html中：

<div class="weather-icon"><img src="icons/unknown.png" /></div>

3- 在您的JavScript文件中（遵循JS代码中的这三个步骤）：

第一步：let locationIcon = document.querySelector('.weather-icon');

第二步：const {icon} = data.weather[0];

第3步（不是代码格式，因为它使反引号部分消失了）：
locationIcon.innerHTML = <img src="icons/${icon}.png">;

对我来说很好。建设愉快。

Answer 4

要做出反应，您可以这样使用：

步骤1 ：初始化空白状态

constructor(){
    super()
        this.state={
            icon:''
        }
    }

第2步：API调用

async componentDidMount(){
            const url = 'http://api.openweathermap.org/data/2.5/'
            const key = 'your api key'
            const response = await fetch(`${url}weather?q=Guwahati&units=metric&APPID=${key}`)
            const data = await response.json() //this will return the json response
            const iconName = data.weather[0].icon // this will hold the icon
            const iconApi = await fetch('http://openweathermap.org/img/w/' + iconName + '.png')
            this.setState({
                icon : iconApi.url
            })
        }

第3步：显示图标

    <div className="weather-icon">
         <img style={{width:'70px'}} src= {this.state.icon} />
    </div>

Answer 5

此处 d 是指白天，就像 n 是指夜晚。并根据天气状况进行更改，例如 03d表示散布的云， 01d表示晴朗的天空等。在这里，您将获得这些图标https://openweathermap.org/weather-conditions#How-to-get-icon-URL

的完整列表

Answer 6

此代码在React Native中对我有用：

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

Answer 7

图标的src如下：

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

请参阅Weather icons

Answer 8

非常感谢大家！我是一个非常初级的Flutter程序员，并且想在Weatherapp中显示Icon，这是我们与Angela Yu一起制作的。

我在Flutter中做到了

ffmpeg

然后我想要显示它，我做了：

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

我希望有一天我可以帮助某人。而且...如果有更简单的方法，我很想听听！

Answer 9

这对我有用！

创建变量以访问javascript和HTML之间的数据。
var var1 = document.querySelector（'idhere'） //您必须使用父类/ id
从JASON获取图标
var tempvariable = data ['weather'] [0] ['icon'];
将链接以及html标签传递到html
var1.innerHTML =“ http://openweathermap.org/img/w/” + tempvariable +“ .png'alt ='描述当前天气的图标。'>”

或

var1.innerHTML =“ http://openweathermap.org/img/w/” + data ['weather'] [0] ['icon'] +“ .png” alt =“描述当前天气的图标。” >“ //如果使用此方法，则不需要步骤2。

Answer 10

http://openweathermap.org/img/wn/$weatherData.weather[0].icon@2x.png

要在网页上显示此内容，您只需将其添加到 img 标签的 src 属性即可。

这是获取图标的 URL 的样子.... 其中 weatherData 是您从对 OPENWEATHERMAP 进行的 API 调用中获得的数据。它采用 JSON 格式。你需要解析。

Answer 11

ExpressJS：第一次获取图标：
const icon = weather.weather[0].icon;

第二： iconurl= http://openweathermap.org/img/wn/${icon}.png;

第三： " alt="">

如何显示openweathermap天气图标

11 个答案: