使用Yahoo天气接口实现全球天气预报 JavaScript+Ajax

2019年1月7日更新

Important EOL Notice: As of Thursday, Jan. 3, 2019, the weather.yahooapis.com and query.yahooapis.com for Yahoo Weather API will be retired.
To continue using our free Yahoo Weather APIs, use https://weather-ydn-yql.media.yahoo.com/forecastrss. Contact yahoo-weather-ydn-api@oath.com for credentials to onboard to this free Yahoo Weather API service.

雅虎的天气接口已变为 https://weather-ydn-yql.media.yahoo.com/forecastrss

先上效果：

国内的天气预报接口对国外城市的支持不够好，国内对全球支持最好的和风天气却没有JavaScript。所以我选择了yahoo的天气接口

优点：

城市全，全球几乎所有的城市都有，包括国外那种只有1千人口的小镇
免费

缺点：

访问速度一般
不是所有城市都有完整的信息。什么意思？就是有些小地方（就是人口只有一千的那种国外小城）不会像大城市那样有完整的风速、能见度、未来9天的天气预报，小地方可能只有未来三天的预报甚至只有当前的天气情况
天气信息较少，没有什么PM2.5、人体舒适度这种信息

这个接口返回的信息：

主要会使用的信息：

日出、日落时间
当前湿度、气压、能见度、天气情况、气温
未来9天的天气预报（天气情况、最高、最低温度）
更新时间

这里面有个code是指的天气情况的代码：

var weatherCode=['龙卷风',//0 tornado'热带风暴',//1 tropical storm'飓风',//2 hurricane'次剧烈雷雨',//3 severe thunderstorms'雷雨',//4 thunderstorms'雨夹雪',//5 mixed rain and snow'雨夹雪',//6 mixed rain and sleet'雨夹雪',//7 mixed snow and sleet'毛毛雨',//8 freezing drizzle'小雨',//9 drizzle'冻雨',//10 freezing rain'小阵雨',//11 showers'大阵雨',//12 showers'小雪花',//13 snow flurries'小雪阵雨',//14 light snow showers'风雪天',//15 blowing snow'雪',//16 snow'冰雹',//17 hail'雨夹雪',//18 sleet'灰尘',//19 dust'雾',//20 foggy'霾',//21 haze'烟',//22 smoky'风暴',//23 blustery'多风',//24 windy'冷',//25 cold'多云',//26 cloudy'多云',//27 mostly cloudy (night)'多云',//28 mostly cloudy (day)'多云转晴',//29 partly cloudy (night)'多云转晴',//30 partly cloudy (day)'晴',//31 clear (night)'晴',//32 sunny'少云',//33 fair (night)'少云',//34 fair (day)'混合雨和冰雹',//35 mixed rain and hail'炎热',//36 hot'零星雷暴',//37 isolated thunderstorms'零星雷阵雨',//38 scattered thunderstorms'零星雷阵雨',//39 scattered thunderstorms'零星阵雨',//40 scattered showers'大雪',//41 heavy snow'分散的阵雪',//42 scattered snow showers'大雪',//43 heavy snow'部分多云',//44 partly cloudy'雷阵雨',//45 thundershowers'阵雪',//46 snow showers'零星雷阵雨',//47 isolated thundershowers'无法获取',//48 3200 not available
];

使用这个天气接口最主要最关键的是这个YQL语句的创建，下面的文章有详细的介绍：

雅虎天气API使用笔记

我个人推荐使用指定woeid的查询语句

select * from weather.forecast where woeid=2502265 and u="c"

因为这种用主键来查询只会返回一个值

select * from geo.placefinder where text="北京"

这种用地名来查询的语句可能返回的值不止一个，因为中国有很多重名的小地名

woeid的值可以在find Yahoo! WOEIDs for any location on Earth里面查询

下面是代码：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Yahoo Weather API</title><script src="https://code.jquery.com/jquery-2.1.4.min.js"></script><style type="text/css">/*下拉菜单部分*/#citySelect{width: 160px;height: 30px;border-radius: 5px;}/*天气展示部分*/#weatherInfo{width: 280px;height: 145px;}.weather{width: 270px;background: -moz-linear-gradient(top,white,#b9c9ff); background: -webkit-linear-gradient(top,white,#b9c9ff); background: -o-linear-gradient(top,white,#b9c9ff); background: -ms-linear-gradient(top,white,#b9c9ff); background: linear-gradient(to bottom,white,#b9c9ff); border-radius: 10px;padding: 3px;display:none;}.astronomy,.futureWeather{font-size: small;text-align: center;}.nowWeatherTable{width: 75%;margin: 0 auto;font-weight: bold;}#weatherInfo h4{margin-top: 5px;margin-bottom: 15px;}.nowWeather{position: relative;bottom: 15px;}.futureWeather{margin-top: 5px;}.futureWeather table{width: 100%;margin: 0px;}</style>
</head>
<body><div style="width: 600px;height: 200px;"><table cellspacing="0" cellpadding="0" border="0"><tr><td><div id="weatherInfo"></div></td><td><select id="citySelect"></select></td></tr></table><br><img src="http://l.yimg.com/a/i/brand/purplelogo//uh/us/news-wea.gif" style="width: 142px;float: right;"><small style="float: right;margin-right: 20px;">Powered By</small></div><!-- 基本数据 -->
<script type="text/javascript">var apiServer = 'https://query.yahooapis.com/v1/public/yql';//使用公共的天气接口var citiesId = [//WOEID 数据，来自于http://woeid.rosselliot.co.nz/lookup'2151330',//北京'2151849',//上海'2161853',//深圳'2161838',//广州'2163866',//武汉'2137081',//南京'2157249',//西安'2158434',//重庆'2165352',//香港'565346',//赫尔辛基'906057',//斯德哥尔摩'554890',//哥本哈根'862592',//奥斯陆'980389',//雷克雅未克];var citiesName = ['北京','上海','深圳','广州','武汉','南京','西安','重庆','香港','赫尔辛基','斯德哥尔摩','哥本哈根','奥斯陆','雷克雅未克',];var weatherCode=['龙卷风',//0 tornado'热带风暴',//1 tropical storm'飓风',//2 hurricane'次剧烈雷雨',//3 severe thunderstorms'雷雨',//4 thunderstorms'雨夹雪',//5 mixed rain and snow'雨夹雪',//6 mixed rain and sleet'雨夹雪',//7 mixed snow and sleet'毛毛雨',//8 freezing drizzle'小雨',//9 drizzle'冻雨',//10 freezing rain'小阵雨',//11 showers'大阵雨',//12 showers'小雪花',//13 snow flurries'小雪阵雨',//14 light snow showers'风雪天',//15 blowing snow'雪',//16 snow'冰雹',//17 hail'雨夹雪',//18 sleet'灰尘',//19 dust'雾',//20 foggy'霾',//21 haze'烟',//22 smoky'风暴',//23 blustery'多风',//24 windy'冷',//25 cold'多云',//26 cloudy'多云',//27 mostly cloudy (night)'多云',//28 mostly cloudy (day)'多云转晴',//29 partly cloudy (night)'多云转晴',//30 partly cloudy (day)'晴',//31 clear (night)'晴',//32 sunny'少云',//33 fair (night)'少云',//34 fair (day)'混合雨和冰雹',//35 mixed rain and hail'炎热',//36 hot'零星雷暴',//37 isolated thunderstorms'零星雷阵雨',//38 scattered thunderstorms'零星雷阵雨',//39 scattered thunderstorms'零星阵雨',//40 scattered showers'大雪',//41 heavy snow'分散的阵雪',//42 scattered snow showers'大雪',//43 heavy snow'部分多云',//44 partly cloudy'雷阵雨',//45 thundershowers'阵雪',//46 snow showers'零星雷阵雨',//47 isolated thundershowers'无法获取',//48 3200 not available];
</script><script type="text/javascript">//生成下拉菜单var optionHTML="";for (var i = 0; i< citiesId.length; i++) {    optionHTML=optionHTML+'<option value="'+i+'">'+citiesName[i]+'</option>';}$('#citySelect').append(optionHTML);var cityContainer=$("#citySelect");cityContainer.change(function () {var index = $(this).val();showWeatherInfo(index);})//默认生成北京天气窗口 showWeatherInfo(0);// 生成天气窗口function showWeatherInfo(sequence) {var queryString = 'select * from weather.forecast where woeid='+ citiesId[sequence] +' and u="c"';$.ajax({url: apiServer,data: {format: 'json',q: queryString,},success: function(data) {console.log(data.query.results);if (data.query.results.channel.item.condition.code===3200) {data.query.results.channel.item.condition.code=48;}if (data.query.results.channel.astronomy.sunrise=="0:0 am"||data.query.results.channel.astronomy.sunset=="0:0 am") {data.query.results.channel.astronomy.sunrise="暂无数据";data.query.results.channel.astronomy.sunset="暂无数据";}// 获取天气图片var weatherImgURL='你的天气图包的地址';switch(data.query.results.channel.item.condition.code){case '0':weatherImgURL=weatherImgURL+'Weather NA.png';break;case '1':weatherImgURL=weatherImgURL+'Thunderstorms.png';break;case '2':weatherImgURL=weatherImgURL+'Windy.png';break;case '3':weatherImgURL=weatherImgURL+'Thunders.png';break;case '4':weatherImgURL=weatherImgURL+'Thunderstorms.png';break;case '5':weatherImgURL=weatherImgURL+'Icy Snow.png';break;case '6':weatherImgURL=weatherImgURL+'Icy Snow.png';break;case '7':weatherImgURL=weatherImgURL+'Icy Snow.png';break;case '8':weatherImgURL=weatherImgURL+'Light Rain.png';break;case '9':weatherImgURL=weatherImgURL+'Light Rain.png';break;case '10':weatherImgURL=weatherImgURL+'Icy.png';break;case '11':weatherImgURL=weatherImgURL+'Rain.png';break;case '12':weatherImgURL=weatherImgURL+'Heavy Rain.png';break;case '13':weatherImgURL=weatherImgURL+'Few Flurries.png';break;case '14':weatherImgURL=weatherImgURL+'Wet Flurries.png';break;case '15':weatherImgURL=weatherImgURL+'Windy Snow.png';break;case '16':weatherImgURL=weatherImgURL+'Snow.png';break;case '17':weatherImgURL=weatherImgURL+'Weather NA.png';break;case '18':weatherImgURL=weatherImgURL+'Icy Snow.png';break;case '19':weatherImgURL=weatherImgURL+'Dust.png';break;case '20':weatherImgURL=weatherImgURL+'Fog.png';break;case '21':weatherImgURL=weatherImgURL+'Haze.png';break;case '22':weatherImgURL=weatherImgURL+'Smoke.png';break;case '23':weatherImgURL=weatherImgURL+'Thunderstorms.png';break;case '24':weatherImgURL=weatherImgURL+'Windy.png';break;case '25':weatherImgURL=weatherImgURL+'Frigid.png';break;case '26':weatherImgURL=weatherImgURL+'Cloudy.png';break;case '27':weatherImgURL=weatherImgURL+'Cloudy Night.png';break;case '28':weatherImgURL=weatherImgURL+'Cloudy.png';break;case '29':weatherImgURL=weatherImgURL+'Night Few Clouds.png';break;case '30':weatherImgURL=weatherImgURL+'Mostly Sunny.png';break;case '31':weatherImgURL=weatherImgURL+'Moon.png';break;case '32':weatherImgURL=weatherImgURL+'Sunny.png';break;case '33':weatherImgURL=weatherImgURL+'Night Few Clouds.png';break;case '34':weatherImgURL=weatherImgURL+'Sun.png';break;case '35':weatherImgURL=weatherImgURL+'Icy Snow.png';break;case '36':weatherImgURL=weatherImgURL+'Hot.png';break;case '37':weatherImgURL=weatherImgURL+'Thunders.png';break;case '38':weatherImgURL=weatherImgURL+'Thunderstorms.png';break;case '39':weatherImgURL=weatherImgURL+'Thunderstorms.png';break;case '40':weatherImgURL=weatherImgURL+'Rain.png';break;case' 41':weatherImgURL=weatherImgURL+'Snow.png';break;case '42':weatherImgURL=weatherImgURL+'Few Flurries.png';break;case '43':weatherImgURL=weatherImgURL+'Snow.png';break;case '44':weatherImgURL=weatherImgURL+'Cloudy.png';break;case '45':weatherImgURL=weatherImgURL+'Thunderstorms.png';break;case '46':weatherImgURL=weatherImgURL+'Rain.png';break;case '47':weatherImgURL=weatherImgURL+'Thunderstorms.png';break;case '48':weatherImgURL=weatherImgURL+'Weather NA.png';break;}var weatherDiv='<div class="weather" id="'+citiesId[sequence]+'">'+'<table cellspacing="0" cellpadding="0" border="0" class="nowWeatherTable">'+'<tr>'+'<td width="75px">'+'<div class="weatherImg">'+'<img src="'+weatherImgURL+'" width="65px" height="65px">'+'</div>'+'</td>'+'<td>'+'<h4>'+citiesName[sequence]+'      '+data.query.results.channel.item.condition.temp+'℃   '+'</h4>'+'<div class="nowWeather">'+weatherCode[data.query.results.channel.item.condition.code]+'</div>'+'</td>'+'</tr>'+'</table>'+'<div class="astronomy">'+'日出：'+data.query.results.channel.astronomy.sunrise+'      '+'日落：'+data.query.results.channel.astronomy.sunset+'</div>'+'<div class="futureWeather">'+'<table  cellspacing="0" cellpadding="0" border="0">'+'<tr>'+'<td>明天</td>'+'<td>后天</td>'+'<td>大后天</td>'+'</tr>'+'<tr>'+'<td>'+data.query.results.channel.item.forecast[1].high+'℃   '+'~'+data.query.results.channel.item.forecast[1].low+'℃   '+'</td>'+'<td>'+data.query.results.channel.item.forecast[2].high+'℃   '+'~'+data.query.results.channel.item.forecast[2].low+'℃   '+'</td>'+'<td>'+data.query.results.channel.item.forecast[3].high+'℃   '+'~'+data.query.results.channel.item.forecast[3].low+'℃   '+'</td>'+'</tr>'+'<tr>'+'<td>'+weatherCode[data.query.results.channel.item.forecast[1].code]+'</td>'+'<td>'+weatherCode[data.query.results.channel.item.forecast[2].code]+'</td>'+'<td>'+weatherCode[data.query.results.channel.item.forecast[3].code]+'</td>'+'</tr>'+'</table>'+'</div>'+'</div>';$('#weatherInfo').empty();$('#weatherInfo').append(weatherDiv);$('.weather').fadeIn(800);//淡入效果}});}
</script>
</body>
</html>

上述代码使用的天气图片包下载地址点击打开链接