如何实现天气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+'°'+weather.units.temp+'</h2>';
html += '<ul><li>'+weather.city+', '+weather.region+'</li>';
html += '<li class="currently">'+weather.currently+'</li>';
html += '<li>'+weather.tempAlt+'°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的主要内容,如果未能解决你的问题,请参考以下文章