基于定位的天气预报Web应用
2016-12-21 13:49
501 查看
首先上效果图:(应用地址:http://www.hainandr.com/ServiceApp/index.html)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202009/04/691d5131d400a150ff96609ef5583ff6)
这是学习js的时候做个一个Web App,当时参考的是慕课网上的jQM Web App-列车时刻表这个课程。感兴趣的可以去看一下这个课程讲解,很详细。
该课程实例用的WebXml免费API,返回的数据为xml格式的。考虑到该免费API确实不怎么稳定,我用的是阿里云市场的天气预报数据服务,其实也就几块钱,它返回的是json数据,所以这两个的数据提取有些不同。当然,我先完成了根据输入城市查询天气的功能,才有了最后基于定位地点的天气查询,毕竟大部分人的需求还是本地天气。
关于WebXml上返回的数据处理,涉及到跨域的问题,视频里用的是cors代理的方法,但是视频提供的代理已经不能使用了,我用到的是阿唐CORS代理服务(http://cors.itxti.net/?)。
先说jQuery Mobile这个框架,初入前端只要用过Bootstrap和jQuery,这个就很好理解了,只要照着文档套用就好了。因为我的想法就是做成手机端的,我直接用这个框架就省了很多麻烦,毕竟用@Media的流式布局其实也很难把控。这样子吧,Mooc上详细讲的我就不说了,我说说他没有讲到的部分。
用的阿里云市场的API,名称叫做中国天气预报接口,基于Web,故用的php请求实例。官方给的php请求示例方法如下:
直接照搬的话,其实返回的并不是json数据(控制台--Network--Preview中可以查看返回的结果,复制到http://www.bejson.com/进行json格式校验)。它会包含表头,所以
这一行应该改为
然后,不会包含表头了。结果返回了 string(15727) "此处为json数据" 这么个东西,显然依然不是我们想要的结果。所以,最后的
问题我用的是iphone,ios10不支持非https协议的定位功能,也就是上述html5的方法在ios设备上用不了。要么用协议为https的,要么想其他办法咯。这里我用到的是高德地图的API。官方示例如下:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202009/04/295e8ef8273c82a2bfdb3d764c6e0ebc)
API返回数据的处理,获取定位地理信息。这两个问题为实现此功能的关键。
关于此应用的详细代码,请访问Sagitarioo的Github
这是学习js的时候做个一个Web App,当时参考的是慕课网上的jQM Web App-列车时刻表这个课程。感兴趣的可以去看一下这个课程讲解,很详细。
该课程实例用的WebXml免费API,返回的数据为xml格式的。考虑到该免费API确实不怎么稳定,我用的是阿里云市场的天气预报数据服务,其实也就几块钱,它返回的是json数据,所以这两个的数据提取有些不同。当然,我先完成了根据输入城市查询天气的功能,才有了最后基于定位地点的天气查询,毕竟大部分人的需求还是本地天气。
关于WebXml上返回的数据处理,涉及到跨域的问题,视频里用的是cors代理的方法,但是视频提供的代理已经不能使用了,我用到的是阿唐CORS代理服务(http://cors.itxti.net/?)。
先说jQuery Mobile这个框架,初入前端只要用过Bootstrap和jQuery,这个就很好理解了,只要照着文档套用就好了。因为我的想法就是做成手机端的,我直接用这个框架就省了很多麻烦,毕竟用@Media的流式布局其实也很难把控。这样子吧,Mooc上详细讲的我就不说了,我说说他没有讲到的部分。
用的阿里云市场的API,名称叫做中国天气预报接口,基于Web,故用的php请求实例。官方给的php请求示例方法如下:
<?php $host = "http://ali-weather.showapi.com"; $path = "/gps-to-weather"; $method = "GET"; $appcode = "你自己的AppCode"; $headers = array(); array_push($headers, "Authorization:APPCODE " . $appcode); $querys = "from=5&lat=40.242266&lng=116.2278&need3HourForcast=0&needAlarm=0&needHourData=0&needIndex=0&needMoreDay=0"; $bodys = ""; $url = $host . $path . "?" . $querys; $curl = curl_init(); curl_setopt($curl, CURLOPT_CUSTOMREQUEST, $method); curl_setopt($curl, CURLOPT_URL, $url); curl_setopt($curl, CURLOPT_HTTPHEADER, $headers); curl_setopt($curl, CURLOPT_FAILONERROR, false); curl_setopt($curl, CURLOPT_RETURNTRANSFER, true); curl_setopt($curl, CURLOPT_HEADER, true); if (1 == strpos("$".$host, "https://")) { curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false); curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false); } var_dump(curl_exec($curl)); ?>
直接照搬的话,其实返回的并不是json数据(控制台--Network--Preview中可以查看返回的结果,复制到http://www.bejson.com/进行json格式校验)。它会包含表头,所以
curl_setopt($curl, CURLOPT_HEADER, true);
这一行应该改为
curl_setopt($curl, CURLOPT_HEADER, false);
然后,不会包含表头了。结果返回了 string(15727) "此处为json数据" 这么个东西,显然依然不是我们想要的结果。所以,最后的
var_dump(curl_exec($curl));改为
$res = curl_exec($curl); echo $res;到这里,指定城市的天气预报查询就可以实现了。下面谈如何实现定位,获得具体地理位置得到当前地区的天气预报。HTML5中的Geolocation API 可以用于获得用户的地理位置。下面是W3school中的代码实例:
<script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else{x.innerHTML="Geolocation is not supported by this browser.";} } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude; } </script>即通过提供的此方法,可以获得Web端的地理定位信息。
问题我用的是iphone,ios10不支持非https协议的定位功能,也就是上述html5的方法在ios设备上用不了。要么用协议为https的,要么想其他办法咯。这里我用到的是高德地图的API。官方示例如下:
<!DOCTYPE html> <html> <head> <title>amap</title> <meta charset="utf-8"> <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/> <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key="></script> <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script> </head> <body> <div id='container'></div> <div id="tip"></div> <div id="text"></div> <script type="text/javascript"> var map, geolocation; map = new AMap.Map("", { }); map.plugin('AMap.Geolocation', function() { geolocation = new AMap.Geolocation({ }); geolocation.getCurrentPosition(); AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息 AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息 }); var gLngs; var gLats; function onComplete(data) { var str=['定位成功']; gLngs=data.position.getLng(); gLats=data.position.getLat(); str.push('经度:' + data.position.getLng()); str.push('纬度:' + data.position.getLat()); str.push('精度:' + data.accuracy + ' 米'); str.push('是否经过偏移:' + (data.isConverted ? '是' : '否')); document.getElementById('tip').innerHTML = str.join('<br>'); document.getElementById('text').innerHTML = str.join('<br>'); } console.log(gLngs); function onError(data) { document.getElementById('tip').innerHTML = '定位失败'; } </script> </body> </html>通过此方法,即可得到定位信息。
API返回数据的处理,获取定位地理信息。这两个问题为实现此功能的关键。
关于此应用的详细代码,请访问Sagitarioo的Github