JavaScript获取本地城市和天气预报实现
来源:互联网 发布:艾克里里用什么软件 编辑:程序博客网 时间:2024/04/30 10:10
1、获取城市接口,新浪的接口相对简单。
URL:http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js
结果:
var remote_ip_info = {"ret":1,"start":-1,"end":-1,"country":"\u4e2d\u56fd","province":"\u5317\u4eac","city":"\u5317\u4eac","district":"","isp":"","type":"","desc":""};
2、获取天气预报接口,因为baidu的接口有雾霾指数,所以选择了它。
URL:http://api.map.baidu.com/telematics/v3/weather?location=北京&output=json&ak=EGgzZ22dsboWQEcPQ6KDQLknQd3YkkkP
响应结果:
{"error":0,"status":"success","date":"2017-03-13","results":[{"currentCity":"北京","pm25":"28","index":[{"title":"穿衣","zs":"较冷","tipt":"穿衣指数","des":"建议着厚外套加毛衣等服装。年老体弱者宜着大衣、呢外套加羊毛衫。"},{"title":"洗车","zs":"较适宜","tipt":"洗车指数","des":"较适宜洗车,未来一天无雨,风力较小,擦洗一新的汽车至少能保持一天。"},{"title":"旅游","zs":"适宜","tipt":"旅游指数","des":"天气较好,温度适宜,是个好天气哦。这样的天气适宜旅游,您可以尽情地享受大自然的风光。"},{"title":"感冒","zs":"较易发","tipt":"感冒指数","des":"昼夜温差较大,较易发生感冒,请适当增减衣服。体质较弱的朋友请注意防护。"},{"title":"运动","zs":"较不宜","tipt":"运动指数","des":"天气较好,但考虑天气寒冷,推荐您进行各种室内运动,若在户外运动请注意保暖并做好准备活动。"},{"title":"紫外线强度","zs":"中等","tipt":"紫外线强度指数","des":"属中等强度紫外线辐射天气,外出时建议涂擦SPF高于15、PA+的防晒护肤品,戴帽子、太阳镜。"}],"weather_data":[{"date":"周一 03月13日 (实时:14℃)","dayPictureUrl":"http://api.map.baidu.com/images/weather/day/qing.png","nightPictureUrl":"http://api.map.baidu.com/images/weather/night/qing.png","weather":"晴","wind":"南风微风","temperature":"14 ~ 2℃"},{"date":"周二","dayPictureUrl":"http://api.map.baidu.com/images/weather/day/qing.png","nightPictureUrl":"http://api.map.baidu.com/images/weather/night/duoyun.png","weather":"晴转多云","wind":"南风微风","temperature":"15 ~ 2℃"},{"date":"周三","dayPictureUrl":"http://api.map.baidu.com/images/weather/day/duoyun.png","nightPictureUrl":"http://api.map.baidu.com/images/weather/night/duoyun.png","weather":"多云","wind":"南风微风","temperature":"16 ~ 4℃"},{"date":"周四","dayPictureUrl":"http://api.map.baidu.com/images/weather/day/duoyun.png","nightPictureUrl":"http://api.map.baidu.com/images/weather/night/yin.png","weather":"多云转阴","wind":"南风微风","temperature":"17 ~ 5℃"}]}]}
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <meta http-equiv="U-XA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=9"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="renderer" content="webkit|ie-comp|ie-stand"> <script type="text/javascript" src="/static/js/1.4.3/jquery.min.js"></script></head><body> <img id="cvsToday" src=""> <label id="lblWeather">--</label> <label id="lblTemperature">--</label> <label id="lblCurTemp">--</label> <script type="text/javascript"> // 获取城市 var cityUrl = 'http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js'; $.getScript( cityUrl, function() { var city = remote_ip_info.city; // 获取城市 // 获取天气预报 $.ajax({ url: "http://api.map.baidu.com/telematics/v3/weather?location=" + city + "&output=json&ak=EGgzZ22dsboWQEcPQ6KDQLknQd3YkkkP", type: "get", dataType: "jsonp", scriptCharset: "gbk", success: function(baiduTQ) { try { if (baiduTQ == null || baiduTQ.error != 0 || baiduTQ.status != "success" || baiduTQ.results.count == 0) { document.getElementById("lblTemperature").innerHTML = "--"; document.getElementById("lblWeather").innerHTML = "--"; document.getElementById("lblCurTemp").innerHTML = "--"; return; } if (baiduTQ.results[0].weather_data.length > 0) { var data = baiduTQ.results[0].weather_data[0]; var split = data.date.split(":"); document.getElementById("lblTemperature").innerHTML = city + "[" + data.temperature + "]"; document.getElementById("lblWeather").innerHTML = data.weather; var curTemp = split.pop(); document.getElementById("lblCurTemp").innerHTML = curTemp.substring(0, curTemp.length - 1); var imgPath = data.dayPictureUrl; document.getElementById("cvsToday").src = imgPath; } } catch (err) { alert(err) } } }); }); </script></body></html>结果展示:
0 0
- JavaScript获取本地城市和天气预报实现
- 实现获取指定城市的天气预报
- 根据城市获取天气预报
- C# WinForm获取soso城市天气预报程序
- 小功能 获取天气预报 城市联动
- Android 根据城市获取天气(天气预报)
- C#获取某个城市的天气预报
- Android 端天气预报APP的实现(五)全国各地城市数据的获取
- 使用天气预报api(中国天气网)获取城市天气(2)---httpclient和json操作
- java 实现城市联动查询天气预报
- Java获取Google天气预报---储存到本地
- XMLHttpRequest+JSON+Web Worker+Web Service后台获取城市天气预报
- Java 用飞信发短信,获取手机号码归属地,查询城市天气预报
- 天气预报--保存已查询城市,历史记录功能实现
- 城市天气三小时预报,天气预报接口实现
- 天气预报--保存已查询城市,历史记录功能实现
- java获取中国城市代码 中国城市ID(天气预报可用哦)
- python3.5爬虫实例:根据城市名称来获取该城市最近七天的天气预报
- Gradle使用简介
- centos6.5使用yum安装saltstack-之salt-master salt-minion
- 软件开发中最顶级的 17 个平台和工具
- linux之VM虚拟机网络问题
- Mybatis 3.0 参数的传递
- JavaScript获取本地城市和天气预报实现
- iOS证书(.p12)和描述文件(.mobileprovision)申请
- POJ 2528 Mayor's posters+zoj 1610 Count the Colors(数组记录)
- 前端跨域知识总结
- (2.1.1.6)一看你就懂,Java中的ClassLoader详解
- se错题集锦(二)
- 微信公众号项目笔记 二
- 面试感悟----一名3年工作经验的程序员应该具备的技能
- oracle之存储过程5-查询结果保存到变量中去