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

首先上效果图：（应用地址：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请求示例方法如下：

直接照搬的话，其实返回的并不是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中的代码实例：

即通过提供的此方法，可以获得Web端的地理定位信息。
问题我用的是iphone，ios10不支持非https协议的定位功能，也就是上述html5的方法在ios设备上用不了。要么用协议为https的，要么想其他办法咯。这里我用到的是高德地图的API。官方示例如下：

通过此方法，即可得到定位信息。

API返回数据的处理，获取定位地理信息。这两个问题为实现此功能的关键。

关于此应用的详细代码，请访问Sagitarioo的Github