HTML5+規範：Geolocation(管理設備位置信息) 定位

時間  2019-12-07
標籤 html5 html 規範 geolocation 管理 設備 位置 信息 定位 欄目 HTML5 简体版
原文   原文鏈接

Geolocation模塊管理設備位置信息，用於獲取地理位置信息，如經度、緯度等。經過plus.geolocation可獲取設備位置管理對象。雖然W3C已經提供標準API獲取位置信息，但在某些平臺存在差別或未實現，爲了保持各平臺的統一性，定義此規範接口獲取位置信息。javascript

一、方法

1.一、getCurrentPosition: 獲取當前設備位置信息

   void plus.geolocation.getCurrentPosition( successCB, errorCB, option );html

說明：位置信息將經過手機GPS設備或其它信息如IP地址、移動網絡信號獲取，因爲獲取位置信息可能須要較長的時間，當成功獲取位置信息後將經過successCB回調函數返回。java

參數：git

successCB: ( GeolocationSuccessCallback ) 必選 獲取設備位置信息成功回調函數緩存

errorCB: ( GeolocationErrorCallback ) 可選 獲取設備位置信息失敗回調函數服務器

option: ( PositionOptions ) 可選 獲取設備位置信息的參數網絡

返回值：void : 無ide

平臺支持：Android - 2.2+ (支持): 支持、iOS - 4.3+ (支持): 支持函數

示例：post

[html] view plain copy print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>Geolocation Example</title>  
  6. <script type="text/javascript" >  
  7. // 擴展API加載完畢後調用onPlusReady回調函數  
  8. document.addEventListener( "plusready", onPlusReady, false );  
  9. // 擴展API加載完畢，如今能夠正常調用擴展API  
  10. function onPlusReady() {  
  11. plus.geolocation.getCurrentPosition( function ( p ) {  
  12. alert( "Geolocation\nLatitude:" + p.coords.latitude + "\nLongitude:" + p.coords.longitude + "\nAltitude:" + p.coords.altitude );  
  13. }, function ( e ) {  
  14. alert( "Geolocation error: " + e.message );  
  15. } );  
  16. }  
  17. </script>  
  18. </head>  
  19. <body >  
  20. </body>  
  21. </html>  
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Geolocation Example</title>
<script type="text/javascript" >
// 擴展API加載完畢後調用onPlusReady回調函數
document.addEventListener( "plusready", onPlusReady, false );
// 擴展API加載完畢，如今能夠正常調用擴展API
function onPlusReady() {
plus.geolocation.getCurrentPosition( function ( p ) {
alert( "Geolocation\nLatitude:" + p.coords.latitude + "\nLongitude:" + p.coords.longitude + "\nAltitude:" + p.coords.altitude );
}, function ( e ) {
alert( "Geolocation error: " + e.message );
} );
}
</script>
</head>
<body >
</body>
</html>

 

1.二、watchPosition: 監聽設備位置變化信息

      Number plus.geolocation.watchPosition( successCB, errorCB, option );

說明：位置信息將經過手機GPS設備或其它信息如IP地址、移動網絡信號獲取。當位置信息更新後將經過successCB回調函數返回。位置信息獲取失敗則調用回調函數errorCB。

參數：

successCB: ( GeolocationSuccessCallback ) 必選 設備位置信息更新成功回調函數

errorCB: ( GeolocationErrorCallback ) 可選 獲取設備位置信息失敗回調函數

option: ( PositionOptions ) 可選 監聽設備位置信息的參數

返回值：Number : 用於標識位置信息監聽器，可經過clearWatch方法取消監聽。

平臺支持：Android - 2.2+ (支持): 支持，iOS - 4.3+ (支持): 支持

示例：

[html] view plain copy print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>Geolocation Example</title>  
  6. <script type="text/javascript" >  
  7. // 擴展API加載完畢後調用onPlusReady回調函數  
  8. document.addEventListener( "plusready", onPlusReady, false );  
  9. // 擴展API加載完畢，如今能夠正常調用擴展API  
  10. function onPlusReady() {  
  11. plus.geolocation.watchPosition( function ( a ) {  
  12. alert( "Geolocation\nLatitude:" + p.coords.latitude + "\nLongitude:" + p.coords.longitude + "\nAltitude:" + p.coords.altitude );  
  13. }, function ( e ) {  
  14. alert( "Geolocation error: " + e.message );  
  15. } );  
  16. }  
  17. </script>  
  18. </head>  
  19. <body >  
  20. </body>  
  21. </html>  
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Geolocation Example</title>
<script type="text/javascript" >
// 擴展API加載完畢後調用onPlusReady回調函數
document.addEventListener( "plusready", onPlusReady, false );
// 擴展API加載完畢，如今能夠正常調用擴展API
function onPlusReady() {
plus.geolocation.watchPosition( function ( a ) {
alert( "Geolocation\nLatitude:" + p.coords.latitude + "\nLongitude:" + p.coords.longitude + "\nAltitude:" + p.coords.altitude );
}, function ( e ) {
alert( "Geolocation error: " + e.message );
} );
}
</script>
</head>
<body >
</body>
</html>

 

1.三、clearWatch: 關閉監聽設備位置信息

       void plus.geolocation.clearWatch( watchId );

參數：watchId: ( Number ) 必選 須要取消的位置監聽器標識，調用watchPosition方法的返回值。

返回值：void : 無

平臺支持：Android - 2.2+ (支持): 支持，iOS - 4.3+ (支持): 支持

示例：

[html] view plain copy print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>Geolocation Example</title>  
  6. <script type="text/javascript" >  
  7. // 擴展API加載完畢後調用onPlusReady回調函數  
  8. document.addEventListener( "plusready", onPlusReady, false );  
  9. // 擴展API加載完畢，如今能夠正常調用擴展API  
  10. var wid = null;  
  11. function onPlusReady() {  
  12. wid = plus.geolocation.watchPosition( function ( p ) {  
  13. alert( "Geolocation\nLatitude:" + p.coords.latitude + "\nLongitude:" + p.coords.longitude + "\nAltitude:" + p.coords.altitude );  
  14. }, function ( e ) {  
  15. alert( "Geolocation error: " + e.message );  
  16. } );  
  17. }  
  18. function cancel() {  
  19. plus.geolocation.clearWatch( wid );  
  20. wid = null;  
  21. }  
  22. </script>  
  23. </head>  
  24. <body >  
  25. <input type="button" value="Cancel" onclick="cancel();" ></input>  
  26. </body>  
  27. </html>  
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Geolocation Example</title>
<script type="text/javascript" >
// 擴展API加載完畢後調用onPlusReady回調函數
document.addEventListener( "plusready", onPlusReady, false );
// 擴展API加載完畢，如今能夠正常調用擴展API
var wid = null;
function onPlusReady() {
wid = plus.geolocation.watchPosition( function ( p ) {
alert( "Geolocation\nLatitude:" + p.coords.latitude + "\nLongitude:" + p.coords.longitude + "\nAltitude:" + p.coords.altitude );
}, function ( e ) {
alert( "Geolocation error: " + e.message );
} );
}
function cancel() {
plus.geolocation.clearWatch( wid );
wid = null;
}
</script>
</head>
<body >
<input type="button" value="Cancel" onclick="cancel();" ></input>
</body>
</html>

 

二、對象

2.一、Position: JSON對象，設備位置信息數據

interface Position {

readonly attribute Coordinates coords;

readonly attribute String coordsType;

readonly attribute Number timestamp;

readonly attribute Address address;

readonly attribute String addresses;

}

屬性：

（1）、coords: (Coordinates 類型 )地理座標信息，包括經緯度、海拔、速度等信息

（2）、coordsType: (String 類型 )獲取到地理座標信息的座標系類型，可取如下座標系類型： 「gps」：表示WGS-84座標系； 「gcj02」：表示國測局經緯度座標系； 「bd09」：表示百度墨卡託座標系； 「bd09ll」：表示百度經緯度座標系。

（3）、timestamp: (Number 類型 )獲取到地理座標的時間戳信息，時間戳值爲從1970年1月1日至今的毫秒數。

（4）、address: (Address 類型 )獲取到地理位置對應的地址信息，獲取地址信息須要鏈接到服務器進行解析，因此會消耗更多的資源，若是不須要獲取地址信息可經過設置PositionOptions參數的geocode屬性值爲false避免獲取地址信息。 若是沒有獲取到地址信息則返回undefined。平臺支持Android - 2.3+ (支持): 使用系統定位模塊沒法獲取位置信息。iOS - 5.1+ (支持): 系統定位模塊也支持獲取位置信息。

（5）、addresses: (String 類型 )獲取完整地址描述信息。若是沒有獲取到地址信息則返回undefined。平臺支持Android - 2.3+ (支持): 使用系統定位模塊沒法獲取位置信息。iOS - 5.1+ (支持): 系統定位模塊也支持獲取位置信息。

2.二、Address: JSON對象，地址信息

interface Address {

readonly attribute String country;

readonly attribute String province;

readonly attribute String city;

readonly attribute String district;

readonly attribute String street;

readonly attribute String poiName;

readonly attribute String postalCode;

readonly attribute String cityCode;

}

屬性：

（1）、country: (String 類型 )國家。如「中國」，若是沒法獲取此信息則返回undefined。

（2）、province: (String 類型 )省份名稱。如「北京市」，若是沒法獲取此信息則返回undefined。

（3）、city: (String 類型 )城市名稱。如「北京市」，若是沒法獲取此信息則返回undefined。

（4）、district: (String 類型 )區（縣）名稱。如「朝陽區」，若是沒法獲取此信息則返回undefined。

（5）、street: (String 類型 )街道和門牌信息。如「酒仙橋路」，若是沒法獲取此信息則返回undefined。

（6）、poiName: (String 類型 )POI信息。如「電子城．國際電子總部」，若是沒法獲取此信息則返回undefined。

（7）、postalCode: (String 類型 )郵政編碼。如「100016」，若是沒法獲取此信息則返回undefined。

（8）、cityCode: (String 類型 )城市代碼。如「010」，若是沒法獲取此信息則返回undefined。

2.三、Coordinates: JSON對象，地理座標信息

interface Coordinates {

readonly attribute double latitude;

readonly attribute double longitude;

readonly attribute double altitude;

readonly attribute double accuracy;

readonly attribute double altitudeAccuracy;

readonly attribute double heading;

readonly attribute double speed;

}

屬性：

（1）、latitude: (Number 類型 )座標緯度值。數據類型對象，地理座標中的緯度值。

（2）、longitude: (Number 類型 )座標經度值。數據類型對象，地理座標中的經度值。

（3）、altitude: (Number 類型 )海拔信息。數據類型對象，若是沒法獲取此信息，則此值爲空（null）。

（4）、accuracy: (Number 類型 )地理座標信息的精確度信息。數據類型對象，單位爲米，其有效值必須大於0。

（5）、altitudeAccuracy: (Number 類型 )海拔的精確度信息。數據類型對象，單位爲米，其有效值必須大於0。若是沒法獲取海拔信息，則此值爲空（null）。

（6）、heading: (Number 類型 )表示設備移動的方向。數據類型對象，範圍爲0到360，表示相對於正北方向的角度。若是沒法獲取此信息，則此值爲空（null）。若是設備沒有移動則此值爲NaN。

（7）、speed: (Number 類型 )表示設備移動的速度。數據類型對象，單位爲米每秒（m/s），其有效值必須大於0。若是沒法獲取速度信息，則此值爲空（null）。

2.四、PositionOptions: JSON對象，監聽設備位置信息參數

屬性：

（1）、enableHighAccuracy: (Boolean 類型 )是否高精確度獲取位置信息。高精度獲取表示須要使用更多的系統資源，默認值爲false。

（2）、timeout: (Number 類型 )獲取位置信息的超時時間。單位爲毫秒（ms），默認值爲不超時。若是在指定的時間內沒有獲取到位置信息則觸發錯誤回調函數。

（3）、maximumAge: (Number 類型 )獲取位置信息的緩存時間。單位爲毫秒（ms），默認值爲0（當即更新獲取）。若是設備緩存的位置信息超過指定的緩存時間，將從新更新位置信息後再返回。

（4）、provider: (String 類型 )優先使用的定位模塊。可取如下供應者： "system"：表示系統定位模塊，支持wgs84座標系； "baidu"：表示百度定位模塊，支持gcj02/bd09/bd09ll座標系； "amap"：表示高德定位模板，支持gcj02座標系。 默認值按如下優先順序獲取（amap>baidu>system），若指定的provider不存在或無效則返回錯誤回調。 注意：百度/高德定位模塊須要配置百度/高德地圖相關參數才能正常使用。平臺支持Android - 2.2+ (支持)，iOS - 4.5+ (支持): provider爲「baidu」時，僅支持bd09ll座標系，暫不支持高德定位模塊。

[html] view plain copy print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>Geolocation Example</title>  
  6. <script type="text/javascript" >  
  7. // 擴展API加載完畢後調用onPlusReady回調函數  
  8. document.addEventListener( "plusready", onPlusReady, false );  
  9. // 擴展API加載完畢，如今能夠正常調用擴展API  
  10. function onPlusReady() {  
  11. // 使用百度地圖地位模塊獲取位置信息  
  12. plus.geolocation.getCurrentPosition( function ( p ) {  
  13. alert( "Geolocation\nLatitude:" + p.coords.latitude + "\nLongitude:" + p.coords.longitude + "\nAltitude:" + p.coords.altitude );  
  14. }, function ( e ) {  
  15. alert( "Geolocation error: " + e.message );  
  16. },{provider:'baidu'});  
  17. }  
  18. </script>  
  19. </head>  
  20. <body >  
  21. </body>  
  22. </html>  
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Geolocation Example</title>
<script type="text/javascript" >
// 擴展API加載完畢後調用onPlusReady回調函數
document.addEventListener( "plusready", onPlusReady, false );
// 擴展API加載完畢，如今能夠正常調用擴展API
function onPlusReady() {
// 使用百度地圖地位模塊獲取位置信息
plus.geolocation.getCurrentPosition( function ( p ) {
alert( "Geolocation\nLatitude:" + p.coords.latitude + "\nLongitude:" + p.coords.longitude + "\nAltitude:" + p.coords.altitude );
}, function ( e ) {
alert( "Geolocation error: " + e.message );
},{provider:'baidu'});
}
</script>
</head>
<body >
</body>
</html>

 

（5）、coordsType: (String 類型 )指定獲取的定位數據座標系類型。可取如下座標系類型： 「wgs84」：表示WGS-84座標系； 「gcj02」：表示國測局經緯度座標系； 「bd09」：表示百度墨卡託座標系； 「bd09ll」：表示百度經緯度座標系； provider爲「system」時，默認使用「wgs84」類型；provider爲「baidu」是，默認使用「bd09ll」類型。 若是設置的座標系類型provider不支持，則返回錯誤。

（6）、geocode: (Boolean 類型 )是否解析地址信息。解析的地址信息保存到Position對象的address、addresses屬性中，true表示解析地址信息，false表示不解析地址信息，返回的Position對象的address、addresses屬性值爲undefined，默認值爲true。 若是解析地址信息失敗則返回的Position對象的address、addresses屬性值爲null。

2.五、GeolocationError: JSON對象，定位錯誤信息

interface GeolocationError {

const Number PERMISSION_DENIED = 1;

const Number POSITION_UNAVAILABLE = 2;

const Number TIMEOUT = 3;

const Number UNKNOWN_ERROR = 4;

readonly attribute Number code;

readonly attribute String message;

}

常量：

PERMISSION_DENIED: (Number 類型 )訪問權限被拒絕。系統不容許程序獲取定位功能，錯誤代碼常量值爲1。

POSITION_UNAVAILABLE: (Number 類型 )位置信息不可用。沒法獲取有效的位置信息，錯誤代碼常量值爲2。

TIMEOUT: (Number 類型 )獲取位置信息超時。沒法在指定的時間內獲取位置信息，錯誤代碼常量值爲3。

UNKNOWN_ERROR: (Number 類型 )未知錯誤。其它未知錯誤致使沒法獲取位置信息，錯誤代碼常量值爲4。

屬性：

code: (Number 類型 )錯誤代碼。取值範圍爲GeolocationError對象的常量值。 

message: (String 類型 )錯誤描述信息。詳細錯誤描述信息。

三、回調方法

3.一、GeolocationSuccessCallback: 獲取設備位置信息成功的回調函數

void onSuccess( position ) {

// Get Position code.

}

參數：position: ( Position ) 必選 設備的地理位置信息，參考Position

返回值：void : 無

示例：

[html] view plain copy print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>Geolocation Example</title>  
  6. <script type="text/javascript" >  
  7. // 擴展API加載完畢後調用onPlusReady回調函數  
  8. document.addEventListener( "plusready", onPlusReady, false );  
  9. // 擴展API加載完畢，如今能夠正常調用擴展API  
  10. function onPlusReady() {  
  11. plus.geolocation.getCurrentPosition( function ( p ) {  
  12. alert( "Geolocation\nLatitude:" + p.coords.latitude + "\nLongitude:" + p.coords.longitude + "\nAltitude:" + p.coords.altitude );  
  13. console.log( "Geolocation info: " + JSON.stringify(p) );  
  14. }, function ( e ) {  
  15. console.log("Gelocation Error: code - "+e.code+"; message - "+e.message);  
  16. } );  
  17. }  
  18. </script>  
  19. </head>  
  20. <body >  
  21. </body>  
  22. </html>  
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Geolocation Example</title>
<script type="text/javascript" >
// 擴展API加載完畢後調用onPlusReady回調函數
document.addEventListener( "plusready", onPlusReady, false );
// 擴展API加載完畢，如今能夠正常調用擴展API
function onPlusReady() {
plus.geolocation.getCurrentPosition( function ( p ) {
alert( "Geolocation\nLatitude:" + p.coords.latitude + "\nLongitude:" + p.coords.longitude + "\nAltitude:" + p.coords.altitude );
console.log( "Geolocation info: " + JSON.stringify(p) );
}, function ( e ) {
console.log("Gelocation Error: code - "+e.code+"; message - "+e.message);
} );
}
</script>
</head>
<body >
</body>
</html>

 

3.一、GeolocationErrorCallback: 獲取設備位置信息失敗的回調函數

function void onGeolocationError( GeolocationError error ) {

// Handle error

var code = error.code; // 錯誤編碼

var message = error.message; // 錯誤描述信息

}

參數：

error: ( GeolocationError ) 必選 獲取位置操做的錯誤信息，可經過error.code（Number類型）獲取錯誤編碼； 可經過error.message（String類型）獲取錯誤描述信息。

返回值：void : 無

示例：

[html] view plain copy print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>Geolocation Example</title>  
  6. <script type="text/javascript" >  
  7. // 擴展API加載完畢後調用onPlusReady回調函數  
  8. document.addEventListener( "plusready", onPlusReady, false );  
  9. // 擴展API加載完畢，如今能夠正常調用擴展API  
  10. function onPlusReady() {  
  11. plus.geolocation.getCurrentPosition( function ( p ) {  
  12. console.log( "Geolocation\nLatitude:" + p.coords.latitude + "\nLongitude:" + p.coords.longitude + "\nAltitude:" + p.coords.altitude );  
  13. }, function ( e ) {  
  14. console.log("Gelocation Error: code - "+e.code+"; message - "+e.message);  
  15.         switch(e.code) {  
  16.           case e.PERMISSION_DENIED:  
  17.               alert("User denied the request for Geolocation.");  
  18.               break;  
  19.           case e.POSITION_UNAVAILABLE:  
  20.               alert("Location information is unavailable.");  
  21.               break;  
  22.           case e.TIMEOUT:  
  23.               alert("The request to get user location timed out.");  
  24.               break;  
  25.           case e.UNKNOWN_ERROR:  
  26.               alert("An unknown error occurred.");  
  27.               break;  
  28.           }  
  29. } );  
  30. }  
  31. </script>  
  32. </head>  
  33. <body >  
  34. </body>  
  35. </html>  
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程