首先上效果圖：（應用地址：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;<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>問題我用的是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