如何实现天气API

Posted

技术标签:

【中文标题】如何实现天气API【英文标题】:how to implement weather API 【发布时间】:2013-03-26 06:05:10 【问题描述】:

您好,我想在我的一个应用中实现天气功能。 所以为此我需要使用天气 API。所以任何人都可以建议我使用哪个天气 API 以及如何使用 jquery Mobile 来实现它。

【问题讨论】:

请参考***.com/questions/3363052/… 【参考方案1】:

这里的解决方案很少,这完全取决于您愿意走多远。是要立即显示最终结果还是要自己解析?

完整的解决方案

Yahoo! Weather Feed Plugin for jQuery

HTML:

<div data-role="page" id="index">
    <div data-theme="a" data-role="header">
        <h3>
            First Page
        </h3>
        <a href="#second" class="ui-btn-right">Next</a>
    </div>

    <div data-role="content">
        <div id="test"></div>
    </div>

    <div data-theme="a" data-role="footer" data-position="fixed">

    </div>
</div> 

Javascript:

$(document).on('pagebeforeshow', '#index', function()       
    $(document).ready(function () 
        $('#test').weatherfeed(['UKXX0085','EGXX0011','UKXX0061','CAXX0518','CHXX0049']);
    );
);

工作示例:http://jsfiddle.net/Gajotres/7qvJH/

Simple weather plugin

可能是最好的一个,因为您将获得可行的插件,但您可以使用它来显示您想要的数据,无论您想在哪里显示数据。

工作示例(不是我的):http://jsfiddle.net/fleeting/a4hbL/

HTML:

<!-- Docs at http://simpleweather.monkeecreate.com -->
<div id="weather"></div>

Javascript:

// Docs at http://simpleweather.monkeecreate.com
$(document).ready(function() 
  $.simpleWeather(
    zipcode: '',
    woeid: '2357536',
    location: '',
    unit: 'f',
    success: function(weather) 
      html = '<h2>'+weather.temp+'&deg;'+weather.units.temp+'</h2>';
      html += '<ul><li>'+weather.city+', '+weather.region+'</li>';
      html += '<li class="currently">'+weather.currently+'</li>';
      html += '<li>'+weather.tempAlt+'&deg;C</li></ul>';

      $("#weather").html(html);
    ,
    error: function(error) 
      $("#weather").html('<p>'+error+'</p>');
    
  );
);

教程

Tutorial 1

来源:谷歌天气提要

这是一个简单的教程。在那里你会发现一切都可以自己做。请注意,它需要 php 和 jQuery。

Tutorial 2

来源:雅虎天气提要

另一个很棒的教程。它只需要 jQuery。在那里,您将找到使其工作所需的一切。

演示: http://demo.tutorialzine.com/2012/05/weather-forecast-geolocation-jquery/

虽然本教程有一些缺陷(它需要您的地理位置),但它可用于手动创建新的天气插件。

编辑 The last tutorial got an update. 现在它使用 OpenWeatherMap 而不是 Yahoo。

【讨论】:

jsfiddle 被删除!和雅虎!不再支持 jQuery 的 Weather Feed 插件

以上是关于如何实现天气API的主要内容,如果未能解决你的问题,请参考以下文章

如何使用PHP调用API接口实现天气查询功能

如何使用python利用api获取天气预报

微信小程序如何实现根据实时天气弹出一个提示窗口

微信公众平台如何在开发模式下设置天气预报自动回复

组态王如何显示实时天气

java 调用天气接口 自动获取当天天气