我最近在开发个人网站，为了丰富页面，就新增了一个天气预报的数据展示，写此博客记录一下。
获取天气数据调用的易源数据天气，需要经纬度的参数，因此这里调用了百度地图的api来获取经纬度。具体实现过程如下：
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你自己的ak"></script>
var myCity = new BMap.LocalCity();
myCity.get(myFun);
var lat;
var lng;
function myFun(result) {
var cityName = result.name;
$("#position").append(cityName);
lat = result.center.lat;
lng = result.center.lng;
$.ajax({
type:"get",
url:'https://ali-weather.showapi.com/gps-to-weather?from=5&lat='+lat+'&lng='+lng+'&need3HourForcast=0&needAlarm=0&needHourData=0&needIndex=0&needMoreDay=0',
beforeSend:function(request){
request.setRequestHeader("Authorization","APPCODE "+"你自己的appcode");
},
dataType:"json",
success: function (data) {
console.log(data);
var city = data.showapi_res_body.cityInfo.c5;
var temperature = data.showapi_res_body.now.temperature;
var weather = data.showapi_res_body.now.weather;
var weatherPic = data.showapi_res_body.now.weather_pic;
var windPower = data.showapi_res_body.now.wind_power;
document.getElementById("weather").setAttribute('title',weather)
$("#weather").append('<img style="width: 30px;position:relative;top:7px" title = '+ weather +' src ='+ weatherPic +'> '+city+': '+temperature+'℃ 风力：'+windPower)
},
error:function(e){
console.log(e.message);
}
})
}
ajax中的请求的url为：https://ali-weather.showapi.com/gps-to-weather?from=5&lat=’+lat+’&lng=’+lng+’&need3HourForcast=0&needAlarm=0&needHourData=0&needIndex=0&needMoreDay=0’
其中部分参数说明：
这个接口正常返回数据结构为：
{
"showapi_res_code": 0,
"showapi_res_error": "",
"showapi_res_body": {
"cityInfo": {//查询的地区基本资料
"c6": "yunnan",//城市所在省英文名
"c5": "丽江",//城市所在市中文名
"c4": "lijiang",//城市所在市英文名
"c3": "丽江",//城市中文名
"c9": "中国",//城市所在国家中文名
"c8": "china",//城市所在国家英文名
"c7": "云南",//城市所在省中文名
"c17": "+8",
"c16": "AZ9888",//雷达站号
"c1": "101291401",//区域id
"c2": "lijiang",//城市英文名
"c11": "0888",//城市区号
"longitude": 100.222,//经度
"c10": "2",//城市级别
"latitude": 26.903,//纬度
"c12": "674100",//邮编
"c15": "2394"//海拔
},
"now": {//现在实时的天气情况
"aqi": "71", //空气质量指数，越小越好
"aqiDetail": { //aqi明细数据
"aqi": "71",
"area": "北京",
"area_code": "beijing",
"co": "0.817", //一氧化碳1小时平均
"no2": "52", //二氧化氮1小时平均
"o3": "33", //臭氧1小时平均
"o3_8h": "9", //臭氧8小时平均
"pm10": "56", //颗粒物（粒径小于等于10μm）1小时平均
"pm2_5": "51", //颗粒物（粒径小于等于2.5μm）1小时平均
"primary_pollutant": "颗粒物(PM2.5)",
"quality": "良", //空气质量指数类别，有“优、良、轻度污染、中度污染、重度污染、严重污染”6类
"so2": "3" //二氧化硫1小时平均
},
"sd": "70%", //空气湿度
"temperature": "15", //当前气温
"temperature_time": "18:30", //采集时间
"weather": "晴", //天气文字标识
"weather_pic": "http://appimg.showapi.com/images/weather/icon/day/00.png", //天气图片地址
"wind_direction": "北风", //风向名称
"wind_power": "1级" //风力
},
"f1": {//今天的天气预报 ,f2是明天，f3是后天，直到f7
"air_press": "1008 hPa", //大气压
"day": "20151023", //日期
"day_air_temperature": "18", //白天天气温度(摄氏度)
"day_weather": "晴", //白天天气标识
"day_weather_pic": "http://app1.showapi.com/weather/icon/day/00.png", //白天天气图标
"day_wind_direction": "无持续风向", //白天风向
"day_wind_power": "微风<10m/h", //白天风力
"jiangshui": "3%", //降水概率
"night_air_temperature": "9", //晚上气温(摄氏度)
"night_weather": "晴",//晚上天气标识
"night_weather_pic": "http://app1.showapi.com/weather/icon/night/00.png", //晚上天气图标
"night_wind_direction": "无持续风向", //晚上风向
"night_wind_power": "微风<10m/h", //晚上风力
"sun_begin_end": "06:35|17:23", //日出|日落时间
"weekday": 5, //星期几
"ziwaixian": "中等", //紫外线强度
"index": {
"yh": {//约会指数
"title": "较不适宜",
"desc": "建议尽量不要去室外约会。"
},
"ls": {//晾晒指数
"title": "不宜",
"desc": "降水可能会淋湿衣物，请选择在室内晾晒。"
},
"clothes": {//穿衣指数
"title": "较舒适",
"desc": "建议穿薄外套或牛仔裤等服装。"
},
"dy": {//钓鱼指数
"title": "不宜",
"desc": "天气不好，不适宜垂钓。"
},
"beauty": {//化妆指数
"title": "保湿",
"desc": "请选用中性保湿型霜类化妆品。"
},
"xq": {//心情指数
"title": "较差",
"desc": "雨水可能会使心绪无端地挂上轻愁。"
},
"travel": {//旅游
"title": "适宜",
"desc": "较弱降水和微风将伴您共赴旅程。"
},
"hc": {//划船指数
"title": "不适宜",
"desc": "天气不好，建议选择别的娱乐方式。"
},
"zs": {//中暑指数
"title": "无",
"desc": "气温不高，中暑几率极低。"
},
"cold": {//感冒
"title": "较易发",
"desc": "降温幅度较大，预防感冒。"
},
"gj": {//逛街指数
"title": "较适宜",
"desc": "有降水，逛街需要带雨具。"
},
"uv": {//紫外线
"title": "最弱",
"desc": "辐射弱，涂擦SPF8-12防晒护肤品。"
},
"cl": {//晨练指数
"title": "较不宜",
"desc": "室外锻炼请携带雨具。"
},
"glass": {//太阳镜
"title": "不需要",
"desc": "白天能见度差不需要佩戴太阳镜"
},
"wash_car": {//洗车
"title": "不宜",
"desc": "有雨，雨水和泥水会弄脏爱车。"
},
"aqi": {//空气质量指数，越小越好
"title": "中",
"desc": "无需特别防护"
},
"ac": {//空调控制
"title": "较少开启",
"desc": "体感舒适，不需要开启空调。"
},
"mf": {//美发指数
"title": "一般",
"desc": "建议选用防晒滋润型护发品或带遮阳帽。"
},
"ag": {//过敏指数
"title": "极不易发",
"desc": "无需担心过敏，可放心外出，享受生活。"
},
"pj": {//啤酒指数
"title": "较适宜",
"desc": "适量的饮用啤酒，注意不要过量。"
},
"nl": {//夜生活指数
"title": "较不适宜",
"desc": "建议夜生活最好在室内进行。"
},
"pk": {//放风筝指数
"title": "不宜",
"desc": "天气不好，不适宜放风筝。"
}
},
"alarmList": [
{
"city": "大连", //预警城市
"issueContent": "大风蓝色预警:预计23日23时到24日08时:大连、锦州、营口、盘锦、葫芦岛地区陆地偏北风6级,阵风7级;渤海、渤海海峡、黄海北部偏北风7级,阵风8级。大连、丹东、锦州、营口、盘锦、葫芦岛附近海域和航线将受影响,请注意防范。省气象灾害预警中心10月23日16时35分发布",
"issueTime": "2015-10-23 16:40:00",
"province": "辽宁省",
"signalLevel": "蓝色",
"signalType": "大风"
}
],
"3hourForcast": [
{
"hour": "20时-23时 ",
"temperature": "12℃/10℃",
"weather": "晴",
"weather_pic": "http://app1.showapi.com/weather/icon/night/00.png",
"wind_direction": "无持续风向",
"wind_power": "微风"
},
{
"hour": "23时-02时 ",
"temperature": "10℃/9℃",
"weather": "晴",
"weather_pic": "http://app1.showapi.com/weather/icon/night/00.png",
"wind_direction": "无持续风向",
"wind_power": "微风"
},
{
"hour": "02时-05时 ",
"temperature": "10℃/9℃",
"weather": "晴",
"weather_pic": "http://app1.showapi.com/weather/icon/night/00.png",
"wind_direction": "无持续风向",
"wind_power": "微风"
},
{
"hour": "05时-08时 ",
"temperature": "13℃/10℃",
"weather": "晴",
"weather_pic": "http://app1.showapi.com/weather/icon/day/00.png",
"wind_direction": "无持续风向",
"wind_power": "微风"
}
]
},
"hourDataList": [ //当天每半小时数据的累积数组。当天0点清空重新累积。
{
"aqi": "53",
"aqiDetail": {
"num": "12",
"co": "0.3",
"area": "北京",
"so2": "3",
"o3": "52",
"no2": "16",
"aqi": "32",
"quality": "优质",
"pm10": "15",
"pm2_5": "6",
"o3_8h": "62",
"primary_pollutant": ""
},
"sd": "85%",
"temperature": "9",
"temperature_time": "00:00",
"weather": "多云",
"weather_pic": "http://appimg.showapi.com/images/weather/icon/night/01.png",
"wind_direction": "北风",
"wind_power": "1级"
},
{
"aqi": "53",
"aqiDetail": {},
"sd": "81%",
"temperature": "10",
"temperature_time": "00:30",
"weather": "多云",
"weather_pic": "http://appimg.showapi.com/images/weather/icon/night/01.png",
"wind_direction": "北风",
"wind_power": "1级"
}
],
"ret_code": 0,
"time": "20151023180000"
}
}
里面包含天气图片，可以直接调用，十分方便；数据是实时刷新的，30分钟一次
成果如下：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
