關於實現手機端自動獲取天氣的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改革，流量賊貴，這裏就只給你們提供一個思路了，有問題你們能夠留言哦，看到的話，博主我會回覆的