如何在我的 asp.net 网站上显示特定城市的天气温度？

Posted 2023-02-14

【中文标题】如何在我的 asp.net 网站上显示特定城市的天气温度？

【英文标题】：how weather temprature of a particular city can be shown on my asp.net website?

【发布时间】：2014-09-06 13:23:08

【问题描述】：

我如何像雅虎网站一样在我的网页上显示天气温度。我想展示一个特定城市的温度。

aspx 代码

<div style="position:absolute;height:705px; background-color:#49A3FF; width:214px;  top: 171px; left: 1067px;"  id="bodyright">

</div>

我想在这个标签中显示温度。我从谷歌搜索分配我发现它使用谷歌 API，但我不明白如何使用谷歌 API。请帮助我

【参考方案1】：

使用 Microsoft 免费网络服务获取世界上任何城市的温度。

Here 是您应该访问的链接。页面上提到的服务调用方式有很多种。

示例：

最简单的调用方法：

http://www.webservicex.net/globalweather.asmx/GetWeather?CityName=Karachi&CountryName=Pakistan

说明：

在上面的例子中：

城市名称 = 卡拉奇

CountryName = 巴基斯坦

只需更改城市和国家/地区名称即可根据需要使用它。

代码：

//call webservice using HTTP get method
var xml = XDocument.Load("http://www.webservicex.net/globalweather.asmx/GetWeather?CityName=Karachi&CountryName=Pakistan");

//convert it to xml
string response = WebUtility.htmlDecode(xml.ToString());

您将获得的 XML 响应：

<string xmlns="http://www.webserviceX.NET">
<?xml version="1.0" encoding="utf-16"?> 
    <CurrentWeather> 
        <Location>Karachi Airport, Pakistan (OPKC) 24-54N 067-08E 22M</Location> 
        <Time>Jul 16, 2014 - 01:25 AM EDT / 2014.07.16 0525 UTC</Time> 
        <Wind> from the WSW (240 degrees) at 9 MPH (8 KT):0</Wind> 
        <Visibility> 3 mile(s):0</Visibility> 
        <SkyConditions> mostly cloudy</SkyConditions> 
        <Temperature> 87 F (31 C)</Temperature> 
        <DewPoint> 75 F (24 C)</DewPoint> 
        <RelativeHumidity> 66%</RelativeHumidity> 
        <Pressure> 29.44 in. Hg (0997 hPa)</Pressure> 
        <Status>Success</Status> 
    </CurrentWeather>
</string>

【讨论】：

请写下我必须做的步骤。我如何添加这些服务

我将在哪个文件中添加此代码..请帮助我

如何在我的网页中添加 XML？以及温度将如何显示在我的网站上？

您只需要向您将手动创建的城市和国家/地区的 URL 创建一个 http 请求。然后你必须解析你将在你的页面上显示的响应。

右键>项目名称>添加网页引用>url>点击go。会遵循这个过程吗？

【参考方案2】：

您可以使用https://openweathermap.org/current 有完整的 API 描述，包括示例。

使用城市名称或城市 ID 发送请求。答案是 JSON 字符串。

示例： https://api.openweathermap.org/data/2.5/weather?id=2172797&appid=APIKEY

  "coord": 
    "lon": 4.4035,
    "lat": 51.2199
  ,
  "weather": [
    
      "id": 800,
      "main": "Clear",
      "description": "clear sky",
      "icon": "01d"
    
  ],
  "base": "stations",
  "main": 
    "temp": 2.08,
    "feels_like": 2.08,
    "temp_min": 0.47,
    "temp_max": 3.34,
    "pressure": 1022,
    "humidity": 77
  ,
  "visibility": 10000,
  "wind": 
    "speed": 0.89,
    "deg": 124,
    "gust": 3.13
  ,
  "clouds": 
    "all": 0
  ,
  "dt": 1640181856,
  "sys": 
    "type": 2,
    "id": 2006860,
    "country": "BE",
    "sunrise": 1640159088,
    "sunset": 1640187429
  ,
  "timezone": 3600,
  "id": 2803138,
  "name": "Antwerp",
  "cod": 200

响应中的温度是“开尔文”。要获取摄氏度，请使用 units=metric https://api.openweathermap.org/data/2.5/weather?id=2172797&units=metric&appid=APIKEY

响应中的温度是“开尔文”。要获得华氏温度，请使用 units=imperial https://api.openweathermap.org/data/2.5/weather?id=2172797&units=imperial&appid=APIKEY

【讨论】：

如何将其嵌入到我的网页中？

【参考方案3】：

您可以使用雅虎天气服务。不需要注册什么的。

这是一个使用 JS 更新 HTML 的示例，它还会每 4 分钟更新一次温度，以防用户在没有刷新的情况下打开浏览器窗口...

var dest$ = $('#bodyright'),
    woeid = 2211096;

var updateWeather = function() 
    $.getJSON('//query.yahooapis.com/v1/public/yql?format=json&callback=?&q=' + encodeURIComponent('select item from weather.forecast where woeid=' + woeid + ''), function(data) 
        if (data && data['query'] && data['query']['results'] && data['query']['results']['channel'] && data['query']['results']['channel']['item'] && data['query']['results']['channel']['item']['condition']) 
           var wInfo = data['query']['results']['channel']['item']['condition'];

           $('<span></span>')
               .appendTo(dest$.append('<br/>'))
               .text('Temp: ' + wInfo['temp'] + ' F');

           // last updated...:
           $('<span></span>')
               .appendTo(dest$.append('<br/>'))
               .text('Last Updated: ' + wInfo['date']);

           // yahoo weather image can be loaded using (yimg_we/' + wInfo['code'] + '.gif'), cant remember URL...
           $('<img/>').attr(
                'src': 'https://s.yimg.com/dh/ap/default/121210/' + wInfo['code'] + '.png',
                'alt': wInfo['text'],
                'title': wInfo['text']
            ).appendTo(dest$.append('<br/>'));
        
    );
    setTimeout(updateWeather, 240000);
;
setTimeout(updateWeather, 50);

【讨论】：

我将此代码嵌入到 head 标签中，但没有显示：(

放在$(function() <code from above> ); 或<script></script> 标记下方<div .. id="bodyright"></div>

我把上面所有的代码都写成这样

检查您的 Web 浏览器调试控制台是否有对 query.yahooapis.com 的请求。

另外，上面的代码依赖于 jQuery JS 库。