H5天氣查詢demo（二）

最近剛好有空，學長幫忙讓做個畢設，於是我提到了那個基於H5地理位置實現天氣查詢的方法，學長聽了也覺得不錯，於是就這個主題，擴展了一下，做了一個航班管理查詢系統，為上次博客中提到的利用H5 api中的經緯度應用做了一個例子。這邊也貼上部分代碼簡單提下思路。

首先網站框架：bootstarp+less+ajax(交互方法)+php+mysql  搭建在sae平台上，文章結束貼上demo地址

$(document).ready(function(){
     $("#myCarousel").carousel('cycle');
    locationAndWeather();
    initEvent();
    initText();
});
var loginLog=1;
var searchName;
var searchLog=1;
function locationAndWeather(localName){
    if(localName){
        weather(localName);
    }else{
        //h5 經緯度的獲取
        var lat,lon,cityname=new Array;
        getLocation();
        function getLocation(){
          if (navigator.geolocation)
            {
            navigator.geolocation.getCurrentPosition(showPosition);
            }
          else{alert("未獲取到您的地理位置，請確認您是手機訪問，且允許開啟地理位置訪問")}
          }
          
        function showPosition(position){
          //console.log(position.coords.latitude+"!!!"+position.coords.longitude)
            lat=position.coords.latitude;
            lon=position.coords.longitude;
            //alert(lat+"!!"+lon);
            
            // 百度地圖API功能
            var point = new BMap.Point(lon, lat);
            var gc = new BMap.Geocoder();
                gc.getLocation(point, function(rs){
               var addComp = rs.addressComponents;
               //alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
                cityname=addComp.city.split("市");
                $(".location_name").html(cityname[0]);
                //天氣模塊
                weather(cityname[0]);
            });
            }
        }
    }

上述代碼主要實現一個經緯度獲取（當然h5的api只能在手機端實現），隨即傳入百度api中提供的BMap.Point函數，然后刷刷刷，就可以得到我們的城市名（不要問我為什么這么寫，詳情請見官方api說明文檔），得到的城市名隨即給到我們的weather函數

//查詢天氣
    var msgLog; 
    function weather(cityName,mode){
     var url="http://api.openweathermap.org/data/2.5/weather?q="+cityName+"&callback=msg&appid=398ae2a4c5112f3604756bf1403e58b1";
     var scr=document.createElement('script');
     scr.setAttribute('type','text/javascript');
     scr.setAttribute('src',url);
     document.getElementsByTagName('head')[0].appendChild(scr);
    }
    //回調函數
  function msg(data){
    console.log("----------------------");
    console.log(data);
    console.log(data.weather[0].main);
    console.log("----------------------");
    var local_weather=data.weather[0].main;
    if(searchLog==2){
      $(".search_name").html(searchName);
      $(".search_weather").html(local_weather);
    }else{
      $(".location_weather").html(local_weather);
    }
    }

這邊呢因為Openweather官方給的建議是用JsonP拿到數據，或者不嫌麻煩PHP CURL也隨意。JsonP的原理，想必大家也知道，說白了就是個回調函數作為src文件引入，這樣避免了跨域的問題，當然這個項目唯一美中不足的可能是Open weather返回的json串都是英文。博主也考慮過用有道的英譯漢api，但是摸摸百度了下，貌似要錢==征求了下學長建議后還是放棄了，大家如果有更多免費的英譯漢api可以留言告訴博主哦。

這邊貼上sae鏈接：11.xiaoweiwei.sinaapp.com/plane  過段時間可能會把代碼統一移植，如果這串鏈接失效的話，大家可以看看評論區。博主會更新鏈接的，希望對大家有所幫助，記得要手機訪問喲，而且要確定共享地理位置