博主大二做的一个项目,当时很傻很天真,但是还是贴出来,希望能给大家一点帮助。欢迎转载哦!我的博客园地址:http://www.cnblogs.com/natureless/
首先分析需求,移动端实现天气查询。如果在没有给定地理位置的时候,那很简单,直接利用JSONP获取Open Weather API提供的一个接口,传个位置就好。这点我就不多说了,下面我要说的是,实现自动定位并获取天气。
首先要做准备工作:百度Map开发者的accesskey,OpenWeather开发者的accesskey。这个注册一下就可以免费试用,还是蛮良心的,哈哈。
现在开始第一步,首先我们要获取经纬度,这里博主用的是H5提供的一个api接口navigator.geolocation,当然也可以利用访问IP获取经纬度或城市,但是博主搜了很多,大部分不对外开放了
var lat,lon,cityname=new Array;
function getLocation(){
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
这里首先判断下浏览器对于api的支持,如果不支持GG思密达咯。在调用
navigator.geolocation.getCurrentPosition这个函数后,我们会传入一个对象给showPosition这个函数,里面包含着经纬度
function showPosition(position) { console.log(position.coords.latitude+"!!!"+position.coords.longitude) lat=position.coords.latitude; lon=position.coords.longitude; //alert(lat+"!!"+lon); // 百度地图API功能 //alert(lat+"!!"+lon); var map = new BMap.Map("allmap"); var point = new BMap.Point(lon, lat); map.centerAndZoom(point, 15); var gc = new BMap.Geocoder(); gc.getLocation(point, function(rs){ var addComp = rs.addressComponents; console.log(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber); $(".location").html("你所在的城市:"+addComp.city); cityname=addComp.city.split("市"); }); var marker = new BMap.Marker(point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中 marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画 //天气模块 weather(); }
console一下,方便看到我们得到的经纬度。有人会问,console只能在控制台看到啊,NONONO,Chrome inspect大家可以看下,支持手机端调试,博主有空也会稍微讲下inspect的,不过网上教程蛮多的,大家可以看看。实在不会,咱们可以alert对吧,哈哈......唔,扯偏了,咱们回到正题,得到经纬度后,咱们就需要调用baidu Map的api了,
传入咱们刚获取的lon,lat这时候就可以返回城市名等信息了。当然博主这边写的有点多,同时绘制了地图,大家可以适当删减。
ok,走到这步我们就可以开始伟大的旅行了,将我们拿到的cityname给我们可爱的Open weather提供的api
//查询天气 function weather(){ var url="http://api.openweathermap.org/data/2.5/weather?q="+cityname[0]+"&callback=msg&appid=openweather的accesskey"; var scr=document.createElement('script'); scr.setAttribute('type','text/javascript'); scr.setAttribute('src',url); document.getElementsByTagName('head')[0].appendChild(scr); } //回调函数 function msg(data){ var local_weather=data.weather[0].main; var temp_max=parseInt(data.main.temp_max-273.13); var temp_min=parseInt(data.main.temp_min-273.13); $(".temp").html("温度:"+temp_min+"℃-"+temp_max+"℃"); //alert("天气"+local_weather+"温度"+temp_min+"℃到"+temp_max+"℃");
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的百度Map accesskey"></script>
利用JSONP给我们的数据,我们就可以拿到天气了,当然博主这里提醒一下,返回的数据最好在pc端console一下,返回的json还是蛮复杂的,还有一点就是一定要在head里面加上上面百度api的url哦
当然最近听朋友说,百度提供了一个api市场,有更简单的天气api,大家有空可以去看看。互联网大牛不是吹的,哈哈。本来想贴上楼主的源码地址,但是楼主用的是sae,最近刚好赶上sae改革,流量贼贵,这里就只给大家提供一个思路了,有问题大家可以留言哦,看到的话,博主我会回复的