最近刚好有空，学长帮忙让做个毕设，于是我提到了那个基于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{ 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; 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函数

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