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

最新推荐文章于 2021-06-18 02:33:54 发布

Sagitarioo

最新推荐文章于 2021-06-18 02:33:54 发布

阅读量2.7k

点赞数

分类专栏：项目文章标签： jQuery Mobile html5定位天气预报API返回数据处理前端 web应用

本文链接：https://blog.csdn.net/Sagitarioo/article/details/53783536

版权

项目专栏收录该内容

3 篇文章 0 订阅

订阅专栏

首先上效果图：（应用地址：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>

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