对接阿里云天气,获取天气预报数据

我最近在开发个人网站,为了丰富页面,就新增了一个天气预报的数据展示,写此博客记录一下。

获取天气数据调用的易源数据天气,需要经纬度的参数,因此这里调用了百度地图的api来获取经纬度。具体实现过程如下:

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你自己的ak"></script>

//天气预报版块
    //百度api 通过ip定位
    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;
        // alert("IP 定位城市:" + cityName+"   经度"+result.center.lng+"   纬度"+result.center.lat);
        $.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',//url就是api请求接口
            beforeSend:function(request){	//向接口发送身份认证
                request.setRequestHeader("Authorization","APPCODE "+"你自己的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分钟一次

成果如下:

在这里插入图片描述

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页