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

mengkun 6,779 15

网上的大多数天气接口要么是收费的,要么只支持 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.   
  15. <div id="output"></div>  
  16.   
  17. <script type="text/javascript" charset="utf-8">  
  18.       
  19.     $.ajax({  
  20.         type: "GET",   
  21.         url: "http://cdn.weather.hao.360.cn/sed_api_weather_info.php?app=360chrome",  
  22.         dataType : "jsonp",  
  23.         jsonp: "_jsonp",//参数名  
  24.         success: function(jsonData){  
  25.             var html;  
  26.             html = '数据更新时间:' + jsonData.pubdate + ' ' + jsonData.pubtime + '<br>';  
  27.               
  28.             html += '地区:' + jsonData.area[0][0] + ' ' + jsonData.area[1][0] + ' ' + jsonData.area[2][0] + '<br>';  
  29.             html += '天气情况:<br>';  
  30.               
  31.             for(var i =0; i<jsonData.weather.length; i++) {  
  32.                 html += jsonData.weather[i].date + '<br>';  
  33.                   
  34.                 if(jsonData.weather[i].info.dawn !== undefined) {  
  35.                     html += '早晨天气:' + jsonData.weather[i].info.dawn[1] +   
  36.                     ' 气温:' + jsonData.weather[i].info.dawn[0] + '~' + jsonData.weather[i].info.dawn[2] + '℃ ' +  
  37.                     jsonData.weather[i].info.dawn[3] +' '+ jsonData.weather[i].info.dawn[4] + '<br>';  
  38.                 }  
  39.                   
  40.                 if(jsonData.weather[i].info.day !== undefined) {  
  41.                     html += '白天天气:' + jsonData.weather[i].info.day[1] +   
  42.                     ' 气温:' + jsonData.weather[i].info.day[0] + '~' + jsonData.weather[i].info.day[2] + '℃ ' +  
  43.                     jsonData.weather[i].info.day[3] +' '+ jsonData.weather[i].info.day[4] + '<br>';  
  44.                 }  
  45.                   
  46.                 if(jsonData.weather[i].info.night !== undefined) {  
  47.                     html += '夜间天气:' + jsonData.weather[i].info.night[1] +   
  48.                     ' 气温:' + jsonData.weather[i].info.night[0] + '~' + jsonData.weather[i].info.night[2] + '℃ ' +  
  49.                     jsonData.weather[i].info.night[3] +' '+ jsonData.weather[i].info.night[4] + '<br>';  
  50.                 }  
  51.                 html += '<br>';  
  52.             }  
  53.               
  54.             html += '穿衣:<br>';  
  55.             html += '【' + jsonData.life.info.chuanyi[0] + '】 ' + jsonData.life.info.chuanyi[1] + '<br><br>';  
  56.               
  57.             html += '感冒:<br>';  
  58.             html += '【' + jsonData.life.info.ganmao[0] + '】 ' + jsonData.life.info.ganmao[1] + '<br><br>';  
  59.               
  60.             html += '空调:<br>';  
  61.             html += '【' + jsonData.life.info.kongtiao[0] + '】 ' + jsonData.life.info.kongtiao[1] + '<br><br>';  
  62.               
  63.             html += '污染:<br>';  
  64.             html += '【' + jsonData.life.info.wuran[0] + '】 ' + jsonData.life.info.wuran[1] + '<br><br>';  
  65.               
  66.             html += '洗车:<br>';  
  67.             html += '【' + jsonData.life.info.xiche[0] + '】 ' + jsonData.life.info.xiche[1] + '<br><br>';  
  68.               
  69.             html += '运动:<br>';  
  70.             html += '【' + jsonData.life.info.yundong[0] + '】 ' + jsonData.life.info.yundong[1] + '<br><br>';  
  71.               
  72.             html += '紫外线:<br>';  
  73.             html += '【' + jsonData.life.info.ziwaixian[0] + '】 ' + jsonData.life.info.ziwaixian[1] + '<br><br>';  
  74.               
  75.             html += 'PM2.5: ' + jsonData.pm25.pm25[0];  
  76.               
  77.             $("#output").html(html);  
  78.         }  
  79.     });  
  80. </script>  
  81.   
  82. </body>  
  83. </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

打赏
发表评论
表情 图片 链接 代码

  1. 北海
    北海 Lv 3

    emmm 一堆乱码QAQ

  2. 小宇
    小宇 Lv 1

    老哥666 [鼓掌]

  3. 香蕉不娇
    香蕉不娇 Lv 1

    你的http://lab.mkblog.cn/weather/源码能不能分享一下

  4. 瓦特
    瓦特 Lv 1

    我把代码保存了一下htm,竟然全是乱码.改成UTF-8编码后正常了...

  5. 星空游戏

    很棒啊

  6. 瀚宇
    瀚宇 Lv 3

    找接口不容易,孟坤辛苦了 [呲牙]

    • mengkun
      mengkun 站长

      @瀚宇没有刻意去找,开着 Fiddler 玩的时候无意间发现的 [wb_二哈]

  7. 瀚宇
    瀚宇 Lv 3

    楼上的小伙伴,你说这个神奇不 https://m.toutiao.com/i6406461044947943938/

  8. 266277
    266277 Lv 4

    http://fakeupdate.net 坤哥神奇不,求“偷” [鼓掌]

    • mengkun
      mengkun 站长

      @266277这个网站的原理很简单,不过"偷"不得。因为它的源码里面有个"copy cat",哈哈哈 #(笑眼)

      • 266277
        266277 Lv 4

        @mengkun神马意思

      • 266277
        266277 Lv 4

        @mengkun我确实看到了猫但是看不懂意思

      • mengkun
        mengkun 站长

        @266277你百度一下 copycat 这个词就知道了……

      • 266277
        266277 Lv 4

        @mengkun然后为什么不能模仿 [尴尬]

分享
微信
微博
QQ