地理位置定位的幾種方式:IP地址,GPS,Wifi,GSM/CDMA
地理位置獲取流程:
1、用戶打開需要獲取地理位置的web應用。
2、應用向瀏覽器請求地理位置,瀏覽器彈出詢問,詢問用戶是否共享地理位置。
3、假設用戶允許,瀏覽器從設別查詢相關信息。
4、瀏覽器將相關信息發(fā)送到一個信任的位置服務器,服務器返回具體的地理位置。
HTML5地理地位的實現(xiàn):
1. 實現(xiàn)基于瀏覽器(無需后端支持)獲取用戶的地理位置技術
2. 精確定位用戶的地理位置( 精度最高達10m之內,依賴設備 )
3. 持續(xù)追蹤用戶的地理位置
4. 與 Google Map、或者 Baidu Map 交互呈現(xiàn)位置信息
Geolocation API 用于將用戶當前地理位置信息共享給信任的站點,這涉及用戶的隱私安全問題,所以當一個站點需要獲取用戶的當前地理位置,瀏覽器會提示用戶是“允許” or “拒絕”。
先看看哪些瀏覽器支持Geolocation API:
IE9.0+、FF3.5+、Safari5.0+、Chrome5.0+、Opera10.6+、IPhone3.0+、Android2.0+
Geolocation API存在于navigator對象中,只包含3個方法:
1、getCurrentPosition //當前位置
2、watchPosition //監(jiān)視位置
3、clearWatch //清除監(jiān)視
navigator.geolocation.getCurrentPosition( … , function(error){
switch(error.code){
case error.TIMEOUT :
alert( " 連接超時,請重試 " );
break;
case error.PERMISSION_DENIED :
alert( " 您拒絕了使用位置共享服務,查詢已取消 " );
break;
case error.POSITION_UNAVAILABLE :
alert( " ,抱歉,暫時無法為您所在的星球提供位置服務 " );
break;
}
});
watchPosition像一個追蹤器與clearWatch成對。
watchPosition與clearWatch有點像setInterval和clearInterval的工作方式。
var watchPositionId = navigator.geolocation.watchPosition(success_callback, error_callback, options);
navigator.geolocation.clearWatch(watchPositionId );
HTML 5提供了地理位置等一系列API可以給用戶使用,方便用戶制作LBS的地理應用,首先在支持HTML 5的瀏覽器中,當開啟API時,會詢問是否用戶同意使用api,否則不會開啟的,保證安全。
1、開啟,判斷是否瀏覽器支持LBS api
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、獲得用戶的地理位置
這個使用getCurrentPosition就可以了;
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");
}
}
當獲得地理位置成功后,會產生一個回調方法了,處理返回的結果,
function setLocation(val, e) {
document.getElementById(e).value = val;
}
function successCallback(position)
{
setLocation(position.coords.latitude, "latitude"); setLocation(position.coords.longitude, "longitude");
}
3、一個很常見的問題,是如何跟蹤用戶不斷變化的地理位置,這里小結下其中用到的兩個api
1 watchPosition
例子如下:
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中,就可以設置顯示最新的地理位置:
function successCallback(position){
setText(position.coords.latitude, "latitude"); setText(position.coords.longitude, "longitude");
}
如果不希望實時跟蹤,則可以取消之:
function clearWatch(watchID) {
window.navigator.geolocation.clearWatch(watchID);
}
4、如何處理異常
當遇到異常時,可以捕捉之:
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 地圖上顯示位置(前提是有google map api等設置好)
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;
}
}