JavaScript获取本地城市和天气预报实现

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℃"}]}]}

3、简单应用

<!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>

结果展示：

JavaScript获取本地城市和天气预报实现相关推荐

4 行 Python 代码获取所在城市天气预报
目录 1.如何获取 2.使用API 3.解决乱码 4.获取不同城市的天气预报 5.设计GUI 使用Python获取天气预报,想想是件很简单的事情.无非是发送一个HTT
java获取中国城市代码中国城市ID（天气预报可用哦）
package org.com.Weather.weather;import java.io.BufferedReader; import java.io.IOException; import ja ...
利用API实现获取城市的天气预报信息和给指定手机号码发送验证码——基于Java
文章目录一.认识网址二.获取城市的天气预报信息三.给指定手机号码发送验证码四.实现自定义短信内容的短信验证码发送五.小结六.参考资料一.认识网址网址的组成:协议://域名:端口号/虚拟 ...
通过js获取本地IP地址
通过js获取本地IP地址最近在做pc项目,需要根据用户的IP地址定位城市.IP地址需要通过js获取: 网上有很多查询接口可以获取到IP,我这里用的是搜狐的: http://pv.sohu.com/c ...
vue中获取获取当前城市地址_Vue使用百度地图获取当前城市
Vue使用百度地图获取当前城市一:申请百度地图密匙注册登录后需要进行开发者认证创建应用获取密匙AK 二:Vue项目使用下载相应插件 html文件引入创建一个新的js文件(下一步需要引入) ...
如何读取电脑html信息,JavaScript 获取客户端计算机硬件及系统信息
JavaScript 获取客户端计算机硬件及系统信息 //系统信息获取 function getSysInfo() { var locator =new ActiveXObject ("Wb ...
Py：利用pickle模块和API天气接口实现输入城市得到该城市的天气预报
Py:利用pickle模块和API天气接口实现输入城市得到该城市的天气预报目录输出结果实现代码输出结果实现代码 # -*- coding: utf-8 -*- ''' Created on ...
用JavaScript获取表单里的值
建立form表单里的标签: 文本输入框,密码输入框,单选框,多选框,下拉框,文本域,隐藏域用JavaScript获取表单里的每一个值, 将值显示出来. 填写数据获取的值如下: < ...
html关于计时的函数,关于JavaScript获取时间函数及实现倒计时
关于JavaScript获取时间函数及实现倒计时 JavaScript获取当前时间函数 var time=new Date() 获取时间函数 Date() 返回当日的日期和时间. getDate() ...

JavaScript获取本地城市和天气预报实现

JavaScript获取本地城市和天气预报实现相关推荐

最新文章

热门文章