站長資訊網測試demo的github地址: github.com/lily1010/html5_geolocation
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" style="300px;height: 300px"></p> </body> </html>
上面代碼最好用手機測試,因為谷歌瀏覽器因為被國內封的緣故,定位嘛,你們懂得
二 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" style="300px;height: 300px"></p> </body> </html>
上面代碼已經在手機上測試通過了,誤差有點大,還是不適合精確定位,定位到城市還是不錯的
