基于定位的天气预报Web应用

来源：互联网发布：淘宝一分钱群编辑：程序博客网时间：2024/06/05 04:22

首先上效果图：（应用地址：http://www.hainandr.com/ServiceApp/index.html）

这是学习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

0 0