你的位置:首页 > 网页设计

[网页设计]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  过段时间可能会把代码统一移植,如果这串链接失效的话,大家可以看看评论区。博主会更新链接的,希望对大家有所帮助,记得要手机访问哟,而且要确定共享地理位置