又挖到了一个天气Api接口(附使用示例)

网上的大多数天气接口要么是收费的,要么只支持 iframe 嵌入方式,根本就没法用……

今天“不小心”从 360 那挖到了一个支持 json 的天气接口,支持自动判断地区,获取最近五天的天气,支持天气相关信息展示。非常好用!

接口请求格式如下:

  1. http://cdn.weather.hao.360.cn/sed_api_weather_info.php?app=360chrome&code=【地区编码】&_jsonp=【jsonp回调函数】  

其中的 地区编码 与中国天气网的地区编码是一样的。如果不设置这个参数,则默认显示本地的天气状况。

点击查看演示

简易的调用示例源码如下:(请自行进行界面美化)

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>天气接口使用示例</title>
  6. <style>
  7. body {  
  8.     font-family: microsoft yahei;  
  9. }  
  10. </style>
  11. <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
  12. </head>
  13. <body>
  14. <div id="output"></div>
  15. <script type="text/javascript" charset="utf-8">
  16.     $.ajax({  
  17.         type: "GET",   
  18.         url: "http://cdn.weather.hao.360.cn/sed_api_weather_info.php?app=360chrome",  
  19.         dataType : "jsonp",  
  20.         jsonp: "_jsonp",//参数名  
  21.         success: function(jsonData){  
  22.             var html;  
  23. html = '数据更新时间:' + jsonData.pubdate + ' ' + jsonData.pubtime + '<br>';  
  24.             html += '地区:' + jsonData.area[0][0] + ' ' + jsonData.area[1][0] + ' ' + jsonData.area[2][0] + '<br>';  
  25.             html += '天气情况:<br>';  
  26.             for(var i =0; i<jsonData.weather.length; i++) {  
  27.                 html += jsonData.weather[i].date + '<br>';  
  28.                 if(jsonData.weather[i].info.dawn !== undefined) {  
  29.                     html += '早晨天气:' + jsonData.weather[i].info.dawn[1] +   
  30.                     ' 气温:' + jsonData.weather[i].info.dawn[0] + '~' + jsonData.weather[i].info.dawn[2] + '℃ ' +  
  31.                     jsonData.weather[i].info.dawn[3] +' '+ jsonData.weather[i].info.dawn[4] + '<br>';  
  32.                 }  
  33.                 if(jsonData.weather[i].info.day !== undefined) {  
  34.                     html += '白天天气:' + jsonData.weather[i].info.day[1] +   
  35.                     ' 气温:' + jsonData.weather[i].info.day[0] + '~' + jsonData.weather[i].info.day[2] + '℃ ' +  
  36.                     jsonData.weather[i].info.day[3] +' '+ jsonData.weather[i].info.day[4] + '<br>';  
  37.                 }  
  38.                 if(jsonData.weather[i].info.night !== undefined) {  
  39.                     html += '夜间天气:' + jsonData.weather[i].info.night[1] +   
  40.                     ' 气温:' + jsonData.weather[i].info.night[0] + '~' + jsonData.weather[i].info.night[2] + '℃ ' +  
  41.                     jsonData.weather[i].info.night[3] +' '+ jsonData.weather[i].info.night[4] + '<br>';  
  42.                 }  
  43.                 html += '<br>';  
  44.             }  
  45.             html += '穿衣:<br>';  
  46.             html += '【' + jsonData.life.info.chuanyi[0] + '】 ' + jsonData.life.info.chuanyi[1] + '<br><br>';  
  47.             html += '感冒:<br>';  
  48.             html += '【' + jsonData.life.info.ganmao[0] + '】 ' + jsonData.life.info.ganmao[1] + '<br><br>';  
  49.             html += '空调:<br>';  
  50.             html += '【' + jsonData.life.info.kongtiao[0] + '】 ' + jsonData.life.info.kongtiao[1] + '<br><br>';  
  51.             html += '污染:<br>';  
  52.             html += '【' + jsonData.life.info.wuran[0] + '】 ' + jsonData.life.info.wuran[1] + '<br><br>';  
  53.             html += '洗车:<br>';  
  54.             html += '【' + jsonData.life.info.xiche[0] + '】 ' + jsonData.life.info.xiche[1] + '<br><br>';  
  55.             html += '运动:<br>';  
  56.             html += '【' + jsonData.life.info.yundong[0] + '】 ' + jsonData.life.info.yundong[1] + '<br><br>';  
  57.             html += '紫外线:<br>';  
  58.             html += '【' + jsonData.life.info.ziwaixian[0] + '】 ' + jsonData.life.info.ziwaixian[1] + '<br><br>';  
  59.             html += 'PM2.5: ' + jsonData.pm25.pm25[0];  
  60.             $("#output").html(html);  
  61.         }  
  62.     });  
  63. </script>
  64. </body>
  65. </html>

附:其它天气接口

天气网的接口(只支持iframe方式调用,修改后面的数字可以展示为其它样式) http://i.tianqi.com/index.php?c=code&id=55

2345天气(只支持iframe方式调用,支持自定义样式) http://tianqi.2345.com/plugin/

中国天气网(只支持iframe方式调用,支持自定义地区) http://m.weather.com.cn/m/pn11/weather.htm

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏纯洁的微笑

springcloud(一):大话Spring Cloud

研究了一段时间spring boot了准备向spirng cloud进发,公司架构和项目也全面拥抱了Spring Cloud。在使用了一段时间后发现Spring...

3498
来自专栏程序猿DD

Spring Cloud Gateway真的有那么差吗?

Spring Cloud从一开始最受大家质疑的就是网关性能,那是由于Spring Cloud最初选择了使用Netflix几年前开源的Zuul作为基础,而高性能版...

6168
来自专栏Java架构沉思录

为什么说 Java 程序员到了必须掌握 Spring Boot 的时候?

Spring Boot 是由 Pivotal 团队提供的全新框架,其设计目的是用来简化新 Spring 应用的初始搭建以及开发过程。该框架使用了特定的方式来进行...

771
来自专栏数据之美

巧用 Hive 模拟分布式 grep

grep 由于内置高效的字符串搜索算法,兼容各种风格的正则,且功能众多,有着 linux 下字符串处理三剑客之一的称号,但是到了如今的大数据/分布式时代,这种单...

2199
来自专栏Java技术

Spring Boot和Spring Cloud学习资源推荐

最近创建的交流群里,很多童鞋都在找关于Spring Boot和Spring Cloud的学习资源,整理了一些比较好的学习资源,分享一下。

1372
来自专栏A周立SpringCloud

《Spring Cloud与Docker微服务架构实战》配套源码

不才写了本使用Spring Cloud玩转微服务架构的书,书名是《Spring Cloud与Docker微服务架构实战》 - 周立,已于2017-01-12交稿...

3977
来自专栏Ken的杂谈

Spring Cloud 入门教程:聊聊Spring Cloud

Spring Cloud 是将分布式系统中一系列基础框架/工具进行整合的框架。其中包含:服务注册与发现、服务网关、熔断器、配置中心、消息中心、服务链路追踪等等。

1243
来自专栏运维前线

CentOS 7 配置php语言开发环境

CentOS 7 配置php语言开发环境 初始化设置参考:http://blog.csdn.net/wh211212/article/details/5292...

3628
来自专栏Java架构师历程

springcloud(一):Spring Cloud简介

研究了一段时间Spring Boot了准备向Spring Cloud进发,公司架构和项目也全面拥抱了Spring Cloud。在使用了一段时间后发现Spring...

1823
来自专栏Java技术栈

Spring Boot 2.1.0 已发布,7 个重大更新!

距离《重磅:Spring Boot 2.0 正式发布!》已经过去大半年了,而 Spring Boot 2.1.0 在 10 月底就发布了,我们来看下 Sprin...

1002

扫码关注云+社区