HTML5 Geolocation API 用于獲得用戶的地理位置。鑒于該特性可能侵犯用戶的隱私，除非用戶同意，否則用戶位置信息是不可用的。

一 基于瀏覽器的HTML5查找地理位置

html5中的GPS定位功能封裝在 navigator.geolocation 屬性里,有三種方法:

(1) getCurrentPosition 只獲取一次用戶的位置

(2) watchPosition 返回用戶的當前位置，并繼續返回用戶移動時的更新位置（就像汽車上的 GPS）。

(3) clearWatch() - 停止 watchPosition() 方法

二 getCurrentPosition和 watchPosition方法使用格式是

getCurrentPosition(successCallback,errorCallback,positionOptions)和watchPosition(successCallback,errorCallback,positionOptions)

(1)successCallback表示調用函數成功以后的回調函數，該函數帶有一個參數，對象字面量格式，表示獲取到的用戶位置數據。

(2)errorCallback表示返回的錯誤代碼。它包含以下兩個屬性：

1、message：錯誤信息2、 code：錯誤代碼。其中code錯誤代碼包括以下四個值：1 位置服務被拒絕2 暫時獲取不到位置信息3 獲取信息超時4 未知錯誤

(3)positionOptions數據格式為JSON，有三個可選的屬性：

1、enableHighAcuracy — 布爾值： 表示是否啟用高精確度模式，如果啟用這種模式，瀏覽器在獲取位置信息時可能需要耗費更多的時間。2、timeout — 整數： 表示瀏覽需要在指定的時間內獲取位置信息，否則觸發errorCallback。3、maximumAge — 整數/常量： 表示瀏覽器重新獲取位置信息的時間間隔。

下面來看一下測試例子:(注意要開啟定位后才可以看效果)

 !DOCTYPE html  html  head  meta charset= utf-8 /  title 基于瀏覽器的HTML5查找地理位置 /title  meta name= viewport content= width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no /  script  var options={ enableHighAccuracy:true, //高精度定位參數 maximumAge:1000 function getLocation(){ if(navigator.geolocation){ //瀏覽器支持geolocation navigator.geolocation.getCurrentPosition(onSuccess,onError,options); //getCurrentPosition 只獲取一次用戶的地理位置函數 //onSuccess成功返回的回調函數(必選),onError失敗返回的回調函數(可選),設置精確度等參數(可選options) //navigator.geolocation.watchPosition(onSuccess,onError,options); //watchPosition 繼續獲取用戶的位置,適合于導航 //onSuccess成功返回的回調函數(必選),onError失敗返回的回調函數(可選),設置精確度等參數(可選options) }else{ //瀏覽器不支持geolocation alert ( 您的瀏覽器暫不支持定位  //成功時 function onSuccess(position){ //返回用戶位置 //經度 var longitude =position.coords.longitude; //緯度 var latitude = position.coords.latitude; //精確度 var accuracy = position.coords.accuracy; //高度精確度 var altitudeAccuracy = position.coords.altitudeAccuracy; //設備正北順時針前進的方位 var heading = position.coords.heading; //設備外部環境的移動速度(m/s) var speed = position.coords.speed; //當位置捕獲到時的時間戳 var timestamp = position.timestamp; document.getElementById( container ).innerHTML= 您的經度是= +longitude+ br  + 您的緯度是= +latitude+ br + 您的精確度是= +accuracy+ br  + 您的高度精確度是= +altitudeAccuracy+ br + 您的設備正北順時針前進的方位是= +heading+ br  + 您的設備外部環境的移動速度(m/s)是= +speed+ br + 您的當位置捕獲到時的時間戳是= +timestamp+ br  //失敗時 function onError(error){ switch(error.code){ case 1:alert( 位置服務被拒絕 break; case 2:alert( 暫時獲取不到位置信息 break; case 3:alert( 獲取信息超時 break; case 4:alert( 未知錯誤 break; window.onload=getLocation; /script  /head  body  p id= container >
 上面代碼最好用手機測試,因為谷歌瀏覽器因為被國內封的緣故,定位嘛,你們懂得
二 HTML5 geolocation調用百度地圖api
百度地圖的手冊地址: developer.baidu.com/map/jsdemo-mobile.htm#i7_1
事先說明,html5不是精確定位,所以在地圖上查看效果時總有幾百米的誤差
 !DOCTYPE html  html  head  meta charset= utf-8 /  title 基于瀏覽器的HTML5查找地理位置和調取百度地圖api /title  meta name= viewport content= width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no /  !-- 百度API --  script src= http://api.map.baidu.com/api?v=1.2 type= text/javascript /script  script  var options={ enableHighAccuracy:true, //高精度定位參數 maximumAge:1000 function getLocation(){ if(navigator.geolocation){ //瀏覽器支持geolocation navigator.geolocation.getCurrentPosition(onSuccess,onError,options); //getCurrentPosition 只獲取一次用戶的地理位置函數 //onSuccess成功返回的回調函數(必選),onError失敗返回的回調函數(可選),設置精確度等參數(可選options) //navigator.geolocation.watchPosition(onSuccess,onError,options); //watchPosition 繼續獲取用戶的位置,適合于導航 //onSuccess成功返回的回調函數(必選),onError失敗返回的回調函數(可選),設置精確度等參數(可選options) }else{ //瀏覽器不支持geolocation alert ( 您的瀏覽器暫不支持定位  //成功時 function onSuccess(position){ //返回用戶位置 //經度 var longitude =position.coords.longitude; //緯度 var latitude = position.coords.latitude; //使用百度地圖API //創建地圖實例  var map =new BMap.Map( container  //創建一個坐標 var point =new BMap.Point(longitude,latitude); //地圖初始化，設置中心點坐標和地圖級別  map.centerAndZoom(point,15); map.addOverlay(new BMap.Marker(point)); //在地圖上你的位置顯示紅色點點 //失敗時 function onError(error){ switch(error.code){ case 1:alert( 位置服務被拒絕 break; case 2:alert( 暫時獲取不到位置信息 break; case 3:alert( 獲取信息超時 break; case 4:alert( 未知錯誤 break; window.onload=getLocation; /script  /head  body  p id= container >
 上面代碼已經在手機上測試通過了,誤差有點大,還是不適合精確定位,定位到城市還是不錯的
【相關推薦】
1. 免費h5在線視頻教程
2. HTML5-Geolocation APIs的示例代碼
3. html5 navigator.geolocation基于瀏覽器獲取地理位置代碼案例
4. html5指南（4）-使用Geolocation的詳解
5. 詳解Html5 Geolocation獲取地理位置信息的示例代碼分享
6. HTML5的Geolocation地理位置定位API使用方法詳解
7. HTML5地理位置定位Geolocation-API及Haversine地理空間距離算法（圖文）
以上就是解析HTML5 geolocation的實例教程的詳細內容，其它編程語言        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。