html5中地理位置定位api接口開(kāi)發(fā)應(yīng)用小結(jié)_HTML5教程
推薦：html5播放視頻且動(dòng)態(tài)截圖實(shí)現(xiàn)步驟與代碼(支持safari其他未測(cè)試)html5播放視頻且動(dòng)態(tài)截圖，很時(shí)尚且炫酷的一項(xiàng)功能，暫不支持chrom ，支持safari其他未測(cè)試，有需要了解的朋友可以適當(dāng)參考下
地理位置定位的幾種方式：IP地址，GPS，Wifi，GSM/CDMA地理位置獲取流程：
1、用戶打開(kāi)需要獲取地理位置的web應(yīng)用。
2、應(yīng)用向?yàn)g覽器請(qǐng)求地理位置，瀏覽器彈出詢問(wèn)，詢問(wèn)用戶是否共享地理位置。
3、假設(shè)用戶允許，瀏覽器從設(shè)別查詢相關(guān)信息。
4、瀏覽器將相關(guān)信息發(fā)送到一個(gè)信任的位置服務(wù)器，服務(wù)器返回具體的地理位置。
HTML5地理地位的實(shí)現(xiàn)：
1. 實(shí)現(xiàn)基于瀏覽器（無(wú)需后端支持）獲取用戶的地理位置技術(shù)
2. 精確定位用戶的地理位置( 精度最高達(dá)10m之內(nèi)，依賴設(shè)備 )
3. 持續(xù)追蹤用戶的地理位置
4. 與 Google Map、或者 Baidu Map 交互呈現(xiàn)位置信息
Geolocation API 用于將用戶當(dāng)前地理位置信息共享給信任的站點(diǎn)，這涉及用戶的隱私安全問(wèn)題，所以當(dāng)一個(gè)站點(diǎn)需要獲取用戶的當(dāng)前地理位置，瀏覽器會(huì)提示用戶是“允許” or “拒絕”。
先看看哪些瀏覽器支持Geolocation API：
IE9.0+、FF3.5+、Safari5.0+、Chrome5.0+、Opera10.6+、IPhone3.0+、Android2.0+
Geolocation API存在于navigator對(duì)象中，只包含3個(gè)方法：
復(fù)制代碼 代碼如下:www.zhaotila.cn
1、getCurrentPosition //當(dāng)前位置
2、watchPosition //監(jiān)視位置
3、clearWatch //清除監(jiān)視
navigator.geolocation.getCurrentPosition( … , function(error){
switch(error.code){
case error.TIMEOUT :
alert( " 連接超時(shí)，請(qǐng)重試 " );
break;
case error.PERMISSION_DENIED :
alert( " 您拒絕了使用位置共享服務(wù)，查詢已取消 " );
break;
case error.POSITION_UNAVAILABLE :
alert( " ，抱歉，暫時(shí)無(wú)法為您所在的星球提供位置服務(wù) " );
break;
}
});
watchPosition像一個(gè)追蹤器與clearWatch成對(duì)。
watchPosition與clearWatch有點(diǎn)像setInterval和clearInterval的工作方式。
var watchPositionId = navigator.geolocation.watchPosition(success_callback, error_callback, options);
navigator.geolocation.clearWatch(watchPositionId );
HTML 5提供了地理位置等一系列API可以給用戶使用，方便用戶制作LBS的地理應(yīng)用，首先在支持HTML 5的瀏覽器中，當(dāng)開(kāi)啟API時(shí)，會(huì)詢問(wèn)是否用戶同意使用api，否則不會(huì)開(kāi)啟的，保證安全。
1、開(kāi)啟，判斷是否瀏覽器支持LBS api
復(fù)制代碼 代碼如下:www.zhaotila.cn
function isGeolocationAPIAvailable()
{
var location = "No, Geolocation is not supported by this browser.";
if (window.navigator.geolocation) {
location = "Yes, Geolocation is supported by this browser.";
}
alert(location);
}
上面的例子中，還在displayError方法中，捕捉了異常；
2、獲得用戶的地理位置
這個(gè)使用getCurrentPosition就可以了；
復(fù)制代碼 代碼如下:www.zhaotila.cn
function requestPosition() {
if (nav == null) {
nav = window.navigator;
}
if (nav != null) {
var geoloc = nav.geolocation;
if (geoloc != null) {
geoloc.getCurrentPosition(successCallback);
}
else {
alert("Geolocation API is not supported in your browser");
}
}
else {
alert("Navigator is not found");
}
}
當(dāng)獲得地理位置成功后，會(huì)產(chǎn)生一個(gè)回調(diào)方法了，處理返回的結(jié)果，
復(fù)制代碼 代碼如下:www.zhaotila.cn
function setLocation(val, e) {
document.getElementById(e).value = val;
}
function successCallback(position)
{
setLocation(position.coords.latitude, "latitude"); setLocation(position.coords.longitude, "longitude");
}
3、一個(gè)很常見(jiàn)的問(wèn)題，是如何跟蹤用戶不斷變化的地理位置，這里小結(jié)下其中用到的兩個(gè)api
1 watchPosition
例子如下：
復(fù)制代碼 代碼如下:www.zhaotila.cn
function listenForPositionUpdates() {
if (nav == null) {
nav = window.navigator;
}
if (nav != null) {
var geoloc = nav.geolocation;
if (geoloc != null) {
watchID = geoloc.watchPosition(successCallback);
} else {
alert("Geolocation API is not supported in your browser");
}
} else {
alert("Navigator is not found");
}
}
然后在successCallback中，就可以設(shè)置顯示最新的地理位置：
復(fù)制代碼 代碼如下:www.zhaotila.cn
function successCallback(position){
setText(position.coords.latitude, "latitude"); setText(position.coords.longitude, "longitude");
}
如果不希望實(shí)時(shí)跟蹤，則可以取消之：
function clearWatch(watchID) {
window.navigator.geolocation.clearWatch(watchID);
}
4、如何處理異常
當(dāng)遇到異常時(shí)，可以捕捉之：
復(fù)制代碼 代碼如下:www.zhaotila.cn
if (geoloc != null) {
geoloc.getCurrentPosition(successCallback, errorCallback);
}
function errorCallback(error) {
var message = "";
switch (error.code) {
case error.PERMISSION_DENIED:
message = "This website does not have permission to use "
+ "the Geolocation API";
break;
case error.POSITION_UNAVAILABLE:
message = "The current position could not be determined.";
break;
case error.PERMISSION_DENIED_TIMEOUT:
message = "The current position could not be determined "
+ "within the specified timeout period.";
break;
}
if (message == "") {
var strErrorCode = error.code.toString();
message = "The position could not be determined due to "
+ "an unknown error (Code: " + strErrorCode + ").";
}
alert(message);
}
5、 在google 地圖上顯示位置（前提是有g(shù)oogle map api等設(shè)置好）
復(fù)制代碼 代碼如下:www.zhaotila.cn
function getCurrentLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showMyPosition,showError);
}
else
{
alert("No, Geolocation API is not supported by this browser.");
}
}
function showMyPosition(position)
{
var coordinates=position.coords.latitude+","+position.coords.longitude;
var map_url="http://maps.googleapis.com/maps/api/staticmap?center="
+coordinates+"&zoom=14&size=300x300&sensor=false";
document.getElementById("googlemap").innerHTML="<img src='"+map_url+"' />";
}
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
alert("This website does not have permission to use the Geolocation API")
break;
case error.POSITION_UNAVAILABLE:
alert("The current position could not be determined.")
break;
case error.TIMEOUT:
alert("The current position could not be determined within the specified time out period.")
break;
case error.UNKNOWN_ERROR:
alert("The position could not be determined due to an unknown error.")
break;
}
}
分享：html5指南-7.geolocation結(jié)合google maps開(kāi)發(fā)一個(gè)小的應(yīng)用今天我們將把html5的geolocation結(jié)合google maps開(kāi)發(fā)一個(gè)小的應(yīng)用,感興趣的朋友可以了解下，如有不足，愿大俠給予指教
相關(guān)HTML5教程：
- 只要五步 就可以用HTML5/CSS3快速制作便簽貼特效(圖)
- 網(wǎng)易微博Web App用HTML5開(kāi)發(fā)的過(guò)程介紹
- HTML5 對(duì)各個(gè)標(biāo)簽的定義與規(guī)定：body的介紹
- 關(guān)于HTML5的安全問(wèn)題開(kāi)發(fā)人員需要牢記的
- 關(guān)于HTML5的22個(gè)初級(jí)技巧(圖文教程)
- 開(kāi)發(fā)人員所需要知道的HTML5性能分析面面觀
- HTML5 Web Database 數(shù)據(jù)庫(kù)的SQL語(yǔ)句的使用方法
- 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中微數(shù)據(jù)概述及在搜索引擎中的使用舉例
- html5構(gòu)建觸屏網(wǎng)站之網(wǎng)站尺寸探討
- html5 Canvas畫圖教程(11)—使用lineTo/arc/bezierCurveTo畫橢圓形
- html5-Canvas可以在web中繪制各種圖形
- HTML中fieldset標(biāo)簽概述及使用方法
- 突襲HTML5之Javascript API擴(kuò)展5—其他擴(kuò)展(應(yīng)用緩存/服務(wù)端消息/桌面通知)
- HTML5使用ApplicationCache接口實(shí)現(xiàn)離線緩存技術(shù)解決離線難題
- html5 Canvas畫圖教程(10)—把面拆成線條模擬出圓角矩形
- HTML5 對(duì)各個(gè)標(biāo)簽的定義與規(guī)定：body的介紹
- HTML5 新舊語(yǔ)法標(biāo)記對(duì)我們有什么好處
- 相關(guān)鏈接：
復(fù)制本頁(yè)鏈接| 搜索html5中地理位置定位api接口開(kāi)發(fā)應(yīng)用小結(jié)
- 教程說(shuō)明：
HTML5教程-html5中地理位置定位api接口開(kāi)發(fā)應(yīng)用小結(jié)
。