html5指南-4.使用Geolocation實(shí)現(xiàn)定位功能_HTML5教程
推薦：html5中canvas學(xué)習(xí)筆記1-畫板的尺寸與實(shí)際顯示尺寸在canvas中當(dāng)在canvas上寫width和height時(shí)為canvas的實(shí)際畫板大小，默認(rèn)情況下width為300px，height為150px,接下來詳細(xì)介紹，感興趣的朋友可以參考下
今天我們要學(xué)習(xí)的是使用Geolocation實(shí)現(xiàn)定位功能。我們可以通過navigator.geolocation獲取Geolocation對(duì)象，他提供了下列方法：getCurrentPosition(callback,errorCallback,options)：獲取當(dāng)前位置；
watchPosition(callback,error,options)：開始監(jiān)控當(dāng)前位置；
clearWatch(id)：停止監(jiān)控當(dāng)前位置。
note：下面例子使用的瀏覽器是chrome，使用其他瀏覽器我不能保證運(yùn)行結(jié)果和例子顯示的結(jié)果一致。
1.獲取當(dāng)前位置
我們將使用getCurrentPosition方法獲取當(dāng)前位置，位置信息不會(huì)以結(jié)果的形式直接返回，我們需要使用callback函數(shù)進(jìn)行處理。在獲取坐標(biāo)的過程中會(huì)有些延遲，還會(huì)問你要訪問權(quán)限。我們來看下面的例子：
復(fù)制代碼 代碼如下:m.ghpqjb.com
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
table{border-collapse: collapse;}
th, td{padding: 4px;}
th{text-align: right;}
</style>
</head>
<body>
<table border="1">
<tr>
<th>Longitude:</th>
<td id="longitude">-</td>
<th>Latitude:</th>
<td id="latitude">-</td>
</tr>
<tr>
<th>Altitude:</th>
<td id="altitude">-</td>
<th>Accuracy:</th>
<td id="accuracy">-</td>
</tr>
<tr>
<th>Altitude Accuracy:</th>
<td id="altitudeAccuracy">-</td>
<th>Heading:</th>
<td id="heading">-</td>
</tr>
<tr>
<th>Speed:</th>
<td id="speed">-</td>
<th>Time Stamp:</th>
<td id="timestamp">-</td>
</tr>
</table>
<script>
navigator.geolocation.getCurrentPosition(displayPosition);
function displayPosition(pos) {
var properties = ['longitude', 'latitude', 'altitude', 'accuracy', 'altitudeAccuracy', 'heading', 'speed'];
for (var i = 0, len = properties.length; i < len; i++) {
var value = pos.coords[properties[i]];
document.getElementById(properties[i]).innerHTML = value;
}
document.getElementById('timestamp').innerHTML = pos.timestamp;
}
</script>
</body>
</html>
返回的position對(duì)象包含兩個(gè)屬性，coords：返回坐標(biāo)信息；timestamp：獲取坐標(biāo)信息的時(shí)間。其中coords又包括下面屬性：latitude：緯度；longitude：經(jīng)度；altitude：高度；accuracy：精確度（米）；altitudeAccuracy：高度精確度（米）；heading：行進(jìn)方向；speed：行進(jìn)速度（米/秒）。
并不是所有的信息都會(huì)返回，這取決于你承載瀏覽器的設(shè)備。像有GPS、加速器、羅盤的移動(dòng)設(shè)備會(huì)返回大部分信息，家用電腦就不行了。家用電腦獲取的位置信息，取決于所處的網(wǎng)絡(luò)環(huán)境或者是wifi。下面我們看上例的運(yùn)行結(jié)果。
點(diǎn)擊允許，獲取坐標(biāo)信息。
現(xiàn)在我們介紹getCurrentPosition的異常處理，他是通過使用errorCallback回調(diào)函數(shù)實(shí)現(xiàn)的。函數(shù)返回的參數(shù)error包含兩個(gè)屬性，code：錯(cuò)誤類型的代碼；message：錯(cuò)誤信息。code包含三個(gè)值：1：用戶沒有授權(quán)使用geolocation；2：無法獲取坐標(biāo)信息；3：獲取信息超時(shí)。
下面我們看個(gè)例子：
復(fù)制代碼 代碼如下:m.ghpqjb.com
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
table{border-collapse: collapse;}
th, td{padding: 4px;}
th{text-align: right;}
</style>
</head>
<body>
<table border="1">
<tr>
<th>Longitude:</th>
<td id="longitude">-</td>
<th>Latitude:</th>
<td id="latitude">-</td>
</tr>
<tr>
<th>Altitude:</th>
<td id="altitude">-</td>
<th>Accuracy:</th>
<td id="accuracy">-</td>
</tr>
<tr>
<th>Altitude Accuracy:</th>
<td id="altitudeAccuracy">-</td>
<th>Heading:</th>
<td id="heading">-</td>
</tr>
<tr>
<th>Speed:</th>
<td id="speed">-</td>
<th>Time Stamp:</th>
<td id="timestamp">-</td>
</tr>
<tr>
<th>Error Code:</th>
<td id="errcode">-</td>
<th>Error Message:</th>
<td id="errmessage">-</td>
</tr>
</table>
<script>
navigator.geolocation.getCurrentPosition(displayPosition, handleError);
function displayPosition(pos) {
var properties = ["longitude", "latitude", "altitude", "accuracy", "altitudeAccuracy", "heading", "speed"];
for (var i = 0; i < properties.length; i++) {
var value = pos.coords[properties[i]];
document.getElementById(properties[i]).innerHTML = value;
}
document.getElementById("timestamp").innerHTML = pos.timestamp;
}
function handleError(err) {
document.getElementById("errcode").innerHTML = err.code;
document.getElementById("errmessage").innerHTML = err.message;
}
</script>
</body>
</html>
拒絕授權(quán)，運(yùn)行結(jié)果：
getCurrentPosition(callback,errorCallback,options)中的options有如下參數(shù)可以使用，enableHighAccuracy：使用最好的效果；timeout：超時(shí)時(shí)間（毫秒）；maximumAge：指定緩存時(shí)間（毫秒）。我們來下下面的例子：
復(fù)制代碼 代碼如下:m.ghpqjb.com
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
table{border-collapse: collapse;}
th, td{padding: 4px;}
th{text-align: right;}
</style>
</head>
<body>
<table border="1">
<tr>
<th>Longitude:</th>
<td id="longitude">-</td>
<th>Latitude:</th>
<td id="latitude">-</td>
</tr>
<tr>
<th>Altitude:</th>
<td id="altitude">-</td>
<th>Accuracy:</th>
<td id="accuracy">-</td>
</tr>
<tr>
<th>Altitude Accuracy:</th>
<td id="altitudeAccuracy">-</td>
<th>Heading:</th>
<td id="heading">-</td>
</tr>
<tr>
<th>Speed:</th>
<td id="speed">-</td>
<th>Time Stamp:</th>
<td id="timestamp">-</td>
</tr>
<tr>
<th>Error Code:</th>
<td id="errcode">-</td>
<th>Error Message:</th>
<td id="errmessage">-</td>
</tr>
</table>
<script>
var options = {
enableHighAccuracy: false,
timeout: 2000,
maximumAge: 30000
};
navigator.geolocation.getCurrentPosition(displayPosition, handleError, options);
function displayPosition(pos) {
var properties = ["longitude", "latitude", "altitude", "accuracy", "altitudeAccuracy", "heading", "speed"];
for (var i = 0; i < properties.length; i++) {
var value = pos.coords[properties[i]];
document.getElementById(properties[i]).innerHTML = value;
}
document.getElementById("timestamp").innerHTML = pos.timestamp;
}
function handleError(err) {
document.getElementById("errcode").innerHTML = err.code;
document.getElementById("errmessage").innerHTML = err.message;
}
</script>
</body>
</html>
4.監(jiān)視位置變化
下面我們介紹使用watchPosition方法實(shí)現(xiàn)位置變化的監(jiān)視，他的使用方法和getCurrentPosition一樣。我們來看例子：
復(fù)制代碼 代碼如下:m.ghpqjb.com
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
table{border-collapse: collapse;}
th, td{padding: 4px;}
th{text-align: right;}
</style>
</head>
<body>
<table border="1">
<tr>
<th>Longitude:</th>
<td id="longitude">-</td>
<th>Latitude:</th>
<td id="latitude">-</td>
</tr>
<tr>
<th>Altitude:</th>
<td id="altitude">-</td>
<th>Accuracy:</th>
<td id="accuracy">-</td>
</tr>
<tr>
<th>Altitude Accuracy:</th>
<td id="altitudeAccuracy">-</td>
<th>Heading:</th>
<td id="heading">-</td>
</tr>
<tr>
<th>Speed:</th>
<td id="speed">-</td>
<th>Time Stamp:</th>
<td id="timestamp">-</td>
</tr>
<tr>
<th>Error Code:</th>
<td id="errcode">-</td>
<th>Error Message:</th>
<td id="errmessage">-</td>
</tr>
</table>
<button id="pressme">Cancel Watch</button>
<script>
var options = {
enableHighAccuracy: false,
timeout: 2000,
maximumAge: 30000
};
var watchID = navigator.geolocation.watchPosition(displayPosition, handleError, options);
document.getElementById("pressme").onclick = function (e) {
navigator.geolocation.clearWatch(watchID);
};
function displayPosition(pos) {
var properties = ["longitude", "latitude", "altitude", "accuracy", "altitudeAccuracy", "heading", "speed"];
for (var i = 0; i < properties.length; i++) {
var value = pos.coords[properties[i]];
document.getElementById(properties[i]).innerHTML = value;
}
document.getElementById("timestamp").innerHTML = pos.timestamp;
}
function handleError(err) {
document.getElementById("errcode").innerHTML = err.code;
document.getElementById("errmessage").innerHTML = err.message;
}
</script>
</body>
</html>
當(dāng)點(diǎn)擊Cancel Watch按鈕時(shí)，停止監(jiān)視。
demo下載地址：Html5Guide.Geolocation.zip
分享：html5 Canvas畫圖教程(3)—canvas出現(xiàn)1像素線條模糊不清的原因上次我們講到，canvas有時(shí)候會(huì)出現(xiàn)1像素的線條模糊不清且好像更寬的情況,這樣的線條顯然不是我們想要的。這篇文章的目的就是弄清楚里面的原理，以及解決它,感興趣的朋友可以了解下哦
相關(guān)HTML5教程：
- 只要五步 就可以用HTML5/CSS3快速制作便簽貼特效(圖)
- 網(wǎng)易微博Web App用HTML5開發(fā)的過程介紹
- HTML5 對(duì)各個(gè)標(biāo)簽的定義與規(guī)定：body的介紹
- 關(guān)于HTML5的安全問題開發(fā)人員需要牢記的
- 關(guān)于HTML5的22個(gè)初級(jí)技巧(圖文教程)
- 開發(fā)人員所需要知道的HTML5性能分析面面觀
- HTML5 Web Database 數(shù)據(jù)庫的SQL語句的使用方法
- HTML5實(shí)踐-圖片設(shè)置成灰度圖
- HTML5安全介紹之內(nèi)容安全策略（CSP）簡(jiǎn)介
- HTML5 Web存儲(chǔ)方式的localStorage和sessionStorage進(jìn)行數(shù)據(jù)本地存儲(chǔ)案例應(yīng)用
- Bootstrap 學(xué)習(xí)分享
- input元素的url類型和email類型簡(jiǎn)介
HTML5教程Rss訂閱Div+Css教程搜索
HTML5教程推薦
- HTML5之SVG 2D入門12—SVG DOM及DOM操作介紹
- 突襲HTML5之Javascript API擴(kuò)展4—拖拽(Drag/Drop)概述
- 突襲HTML5之Javascript API擴(kuò)展1—Web Worker異步執(zhí)行及相關(guān)概述
- 淺談three.js中的needsUpdate的應(yīng)用
- html5 application cache遇到的嚴(yán)重問題
- html5的新增的標(biāo)簽和廢除的標(biāo)簽簡(jiǎn)要概述
- html5指南-2.如何操作document metadata
- 突襲HTML5之Javascript API擴(kuò)展5—其他擴(kuò)展(應(yīng)用緩存/服務(wù)端消息/桌面通知)
- HTML5之SVG 2D入門6—視窗坐標(biāo)系與用戶坐標(biāo)系及變換概述
- html5與css3小應(yīng)用
- 相關(guān)鏈接：
- 教程說明：
HTML5教程-html5指南-4.使用Geolocation實(shí)現(xiàn)定位功能
。