关于实现手机端自动获取天气的demo

博主大二作的一个项目，当时很傻很天真，可是仍是贴出来，但愿能给你们一点帮助。欢迎转载哦！个人博客园地址：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改革，流量贼贵，这里就只给你们提供一个思路了，有问题你们能够留言哦，看到的话，博主我会回复的