PhoneGap API介绍:Geolocation

移动开发
本文将介绍PhoneGap API——Geolocation:使得你的应用程序可以访问地理位置信息。geolocation对象提供了对设备GPS传感器的访问。Geolocation提供设备的位置信息,例如经度和纬度。位置信息的常见来源包括全球定位系统(GPS),以及通过诸如IP地址、RFID、WiFi和蓝牙的MAC地址、和GSM/CDMA手机ID的网络信号所做的推断。不能保证该API返回的是设备的真实位置信息。这个API是基于W3C Geo location API Specification实现的。有些设备已经提供了对该规范的实现,对于这些设备采用内置实现而非使用PhoneGap的实现。对于没有地理位置支持的设备

方法

参数

对象(只读)

geolocation.getCurrentPosition

  • 返回一个Position对象表示设备的当前位置。
  1. navigator.geolocation.getCurrentPosition(geolocationSuccess, 
  2.                                 [geolocationError], 
  3.                                 [geolocationOptions]); 

参数

  • geolocationSuccess:获取位置信息成功时调用的回调函数,参数为当前的位置信息。
  • geolocationError:(可选项)获取位置信息出错时调用的回调函数。
  • geolocationOptions:(可选项)地理位置选项。

说明

  • geolocation.getCurrentPositon是一个异步函数。它回传一个包含设备当前位置信息的Position对象给geolocationSuccess回调函数。如果发生错误,触发geolocationError回调函数并传递一个PositionError对象。

支持的平台

  • Android
  • BlackBerry (OS 4.6)
  • BlackBerry WebWorks (OS 5.0或更高版本)
  • iPhone

简单的范例

  1. //    获取位置信息成功时调用的回调函数 
  2. //    该方法接受一个“Position”对象,包含当前GPS坐标信息 
  3. var onSuccess = function(position) { 
  4.     alert('Latitude: '          + position.coords.latitude          + '\n' + 
  5.         'Longitude: '         + position.coords.longitude         + '\n' + 
  6.         'Altitude: '          + position.coords.altitude          + '\n' + 
  7.         'Accuracy: '          + position.coords.accuracy          + '\n' + 
  8.         'Altitude Accuracy: ' + position.coords.altitudeAccuracy  + '\n' + 
  9.         'Heading: '           + position.coords.heading           + '\n' + 
  10.         'Speed: '             + position.coords.speed             + '\n' + 
  11.         'Timestamp: '         + new Date(position.timestamp)      + '\n'); 
  12. }; 
  13.  
  14. // onError回调函数接收一个PositionError对象 
  15. function onError(error) { 
  16.     alert('code: '    + error.code    + '\n' + 
  17.         'message: ' + error.message + '\n'); 
  18.  
  19. navigator.geolocation.getCurrentPosition(onSuccess, onError); 

完整的范例

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head>     
  4. <title>Device Properties Example</title> 
  5.  
  6. <script type="text/javascript" charset="utf-8" src="phonegap.js"></script> 
  7. <script type="text/javascript" charset="utf-8"> 
  8.  
  9.     // 等待加载PhoneGap 
  10.     document.addEventListener("deviceready", onDeviceReady, false); 
  11.      
  12.     // PhoneGap加载完毕 
  13.     function onDeviceReady() { 
  14.         navigator.geolocation.getCurrentPosition(onSuccess, onError); 
  15.     } 
  16.      
  17.     // 获取位置信息成功时调用的回调函数 
  18.     function onSuccess(position) { 
  19.         var element = document.getElementById('geolocation'); 
  20.         element.innerHTML = 'Latitude: '           + position.coords.latitude              + '<br />' + 
  21.                             'Longitude: '          + position.coords.longitude             + '<br />' + 
  22.                             'Altitude: '           + position.coords.altitude              + '<br />' + 
  23.                             'Accuracy: '           + position.coords.accuracy              + '<br />' + 
  24.                             'Altitude Accuracy: '  + position.coords.altitudeAccuracy      + '<br />' + 
  25.                             'Heading: '            + position.coords.heading               + '<br />' + 
  26.                             'Speed: '              + position.coords.speed                 + '<br />' + 
  27.                             'Timestamp: '          + new Date(position.timestamp)          + '<br />'; 
  28.     } 
  29.      
  30.     // onError回调函数接收一个PositionError对象 
  31.     function onError(error) { 
  32.         alert('code: '    + error.code    + '\n' + 
  33.             'message: ' + error.message + '\n'); 
  34.     } 
  35.  
  36. </script> 
  37. </head> 
  38. <body> 
  39.     <p id="geolocation">Finding geolocation...</p> 
  40. </body> 
  41. </html> 

geolocation.watchPosition

  • 监视设备的当前位置的变化。
  1. var watchId = navigator.geolocation.watchPosition(geolocationSuccess, 
  2.                                          [geolocationError], 
  3.                                          [geolocationOptions]); 

参数

  • geolocationSuccess: 获取位置信息成功时调用的回调函数,参数为当前位置信息。
  • geolocationError:(可选项)获取位置信息出错时调用的回调函数。
  • geolocationOptions:(可选项)地理位置选项。

返回

  • String:返回的watch id是位置监视String:返回的watch id是位置监视周期的引用。可以通过geolocation.clearWatch调用该watch ID以停止对位置变化的监视。

说明

  • geolocation.watchPosition是一个异步函数。当检测到设备的位置发生改变时,它返回设备的当前位置。当设备检索到一个新的位置,会触发geolocationSuccess回调函数并传递一个Position对象作为参数。如果发生错误,会触发geolocationError回调函数并传递一个PositionError对象。

支持的平台

  • Android
  • BlackBerry (OS 4.6)
  • BlackBerry WebWorks (OS 5.0或更高版本)
  • iPhone

简单的范例

  1. // 获取位置信息成功时调用的回调函数 
  2. // 该方法接受一个“Position”对象,包含当前GPS坐标信息 
  3. function onSuccess(position) { 
  4.     var element = document.getElementById('geolocation'); 
  5.     element.innerHTML = 'Latitude: '  + position.coords.latitude      + '<br>' + 
  6.                         'Longitude: ' + position.coords.longitude     + '<br>' + 
  7.                         '<hr>' + element.innerHTML; 
  8.  
  9. // onError回调函数接收一个PositionError对象 
  10. function onError(error) { 
  11.     alert('code: '    + error.code    + '\n' + 
  12.         'message: ' + error.message + '\n'); 
  13.  
  14. // Options: 每隔3秒钟检索一次位置信息 
  15. var watchID = navigator.geolocation.watchPosition(onSuccess, onError, { frequency: 3000 }); 

完整的范例

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head>     
  4. <title>Device Properties Example</title> 
  5.  
  6. <script type="text/javascript" charset="utf-8" src="phonegap.js"></script> 
  7. <script type="text/javascript" charset="utf-8"> 
  8.  
  9.     // 等待加载PhoneGap 
  10.     document.addEventListener("deviceready", onDeviceReady, false); 
  11.      
  12.     var watchID = null
  13.      
  14.     // PhoneGap加载完毕 
  15.     function onDeviceReady() { 
  16.         // 每隔3秒钟更新一次 
  17.         var options = { frequency: 3000 }; 
  18.         watchID = navigator.geolocation.watchPosition(onSuccess, onError, options); 
  19.     } 
  20.      
  21.     // 获取位置信息成功时调用的回调函数 
  22.     function onSuccess(position) { 
  23.         var element = document.getElementById('geolocation'); 
  24.         element.innerHTML = 'Latitude: '  + position.coords.latitude      + '<br />' + 
  25.                             'Longitude: ' + position.coords.longitude     + '<br />' + 
  26.                             <hr />''      + element.innerHTML; 
  27.     } 
  28.      
  29.     // onError回调函数接收一个PositionError对象 
  30.     function onError(error) { 
  31.         alert('code: '    + error.code    + '\n' + 
  32.             'message: ' + error.message + '\n'); 
  33.     } 
  34.  
  35. </script> 
  36. </head> 
  37. <body> 
  38.     <p id="geolocation">Finding geolocation...</p> 
  39. </body> 
  40. </html> 

geolocation.clearWatch

  • 停止watchID参数指向的设备位置变化监视。
  1. navigator.geolocation.clearWatch(watchID); 

参数

  • watchID:要清除的watchPosition周期的id。(字符串类型)

说明

  • geolocation.clearWatch函数通过清除watchID指向的geolocation.watchPosition来停止对设备位置变化的监视。

支持的平台

  • Android
  • BlackBerry (OS 4.6)
  • BlackBerry WebWorks (OS 5.0或更高版本)
  • iPhone

简单的范例

  1. // 选项: 每隔3秒钟检索一次位置信息 
  2. var watchID = navigator.geolocation.watchPosition(onSuccess, onError, { frequency: 3000 }); 
  3.  
  4. // ...后继处理... 
  5.  
  6. navigator.geolocation.clearWatch(watchID); 

完整的范例

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head>     
  4. <title>Device Properties Example</title> 
  5.  
  6. <script type="text/javascript" charset="utf-8" src="phonegap.js"></script> 
  7. <script type="text/javascript" charset="utf-8"> 
  8.  
  9.     // 等待加载PhoneGap 
  10.     document.addEventListener("deviceready", onDeviceReady, false); 
  11.      
  12.     var watchID = null
  13.      
  14.     // PhoneGap加载完毕 
  15.     function onDeviceReady() { 
  16.         // 每隔3秒钟更新一次 
  17.         var options = { frequency: 3000 }; 
  18.         watchID = navigator.geolocation.watchPosition(onSuccess, onError, options); 
  19.     } 
  20.      
  21.     // 获取位置信息成功时调用的回调函数 
  22.     function onSuccess(position) { 
  23.         var element = document.getElementById('geolocation'); 
  24.         element.innerHTML = 'Latitude: '  + position.coords.latitude      + '<br />' + 
  25.                            'Longitude: ' + position.coords.longitude     + '<br />' + 
  26.                            '<hr />'      + element.innerHTML; 
  27.     } 
  28.      
  29.     // 清除前述已经开始的监视 
  30.     function clearWatch() { 
  31.         if (watchID != null) { 
  32.             navigator.geolocation.clearWatch(watchID); 
  33.             watchID = null
  34.         } 
  35.     } 
  36.      
  37.     // onError回调函数接收一个PositionError对象 
  38.     function onError(error) { 
  39.         alert('code: '    + error.code    + '\n' + 
  40.             'message: ' + error.message + '\n'); 
  41.     } 
  42.  
  43. </script> 
  44. </head> 
  45. <body> 
  46.     <p id="geolocation">Finding geolocation...</p> 
  47.     <button onclick="clearWatch();">Clear Watch</button> 
  48. </body> 
  49. </html> 

geolocationSuccess

  • 当得到一个有效地理位置信息时,此用户回调函数被调当获得一个地理位置信息时,此用户回调函数被调用。
  1. function(position) { 
  2.     // 进行处理 

参数

  • position:设备返回的地理位置信息。(Position类型)

范例

  1. function geolocationSuccess(position) { 
  2.     alert('Latitude: '          + position.coords.latitude          + '\n' + 
  3.         'Longitude: '         + position.coords.longitude         + '\n' + 
  4.         'Altitude: '          + position.coords.altitude          + '\n' + 
  5.         'Accuracy: '          + position.coords.accuracy          + '\n' + 
  6.         'Altitude Accuracy: ' + position.coords.altitudeAccuracy  + '\n' + 
  7.         'Heading: '           + position.coords.heading           + '\n' + 
  8.         'Speed: '             + position.coords.speed             + '\n' + 
  9.         'Timestamp: '         + new Date(position.timestamp)      + '\n'); 

geolocationError

  • 当geolocation函数发生错误时,此用户回调函数被调用。
  1. function(error) { 
  2.     // 处理错误 

参数

  • error:设备返回的错误信息。(PositionError类型)

geolocationOptions

  • 用户定制地理位置检索的可选参数。
  1. { maximumAge: 3000, timeout: 5000, enableHighAccuracy: true }; 

选项

  • frequency:以毫秒为单位的检索位置周期。这个选项并非W3C规范的一部分,未来会被删除并用maximumAge来替代该选项。(数字类型)(默认值:10000)
  • enableHighAccuracy:提供一个表明应用程序希望获得最佳可能结果的提示。(布尔类型)
  • timeout:允许的以毫秒为单位的最大时间间隔,该时间间隔是从geolocation.getCurrentPosition或geolocation.watchPosition的调用到相应的geolocationSuccess回调函数被调用。(数字类型)
  • maximumAge:应用程序将接受一个缓存的位置信息,当该缓存的位置信息的年龄不大于此参数设定值,单位是毫秒。(数字类型)

Android的特异情况

  • 除非enableHighAccuracy选项被设定为true,否则Android 2.X模拟器不会返回一个地理位置结果。
  1. { enableHighAccuracy: true } 

Position

  • 包含由geolocation API创建的Position坐标信息。

属性

  • coords:一系列地理坐标。(Coordinates类型)
  • timestamp:以毫秒为单位的coords的创建时间戳。(DOMTimeStamp类型)

说明

  • Position对象是由PhoneGap创建和填充的,并通过一个回调函数返回用户。

支持的平台

  • Android
  • BlackBerry (OS 4.6)
  • BlackBerry WebWorks (OS 5.0或更高版本)
  • iPhone

简单的范例

  1. // 获取位置信息成功后调用的回调函数 
  2. var onSuccess = function(position) { 
  3.     alert('Latitude: '          + position.coords.latitude          + '\n' + 
  4.         'Longitude: '         + position.coords.longitude         + '\n' + 
  5.         'Altitude: '          + position.coords.altitude          + '\n' + 
  6.         'Accuracy: '          + position.coords.accuracy          + '\n' + 
  7.         'Altitude Accuracy: ' + position.coords.altitudeAccuracy  + '\n' + 
  8.         'Heading: '           + position.coords.heading           + '\n' + 
  9.         'Speed: '             + position.coords.speed             + '\n' + 
  10.         'Timestamp: '         + new Date(position.timestamp)      + '\n'); 
  11. }; 
  12.  
  13. // onError回调函数接收一个PositionError对象 
  14. function onError(error) { 
  15.     alert('code: '    + error.code    + '\n' + 
  16.         'message: ' + error.message + '\n'); 
  17.  
  18. navigator.geolocation.getCurrentPosition(onSuccess, onError); 

完整的范例

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head>     
  4. <title>Device Properties Example</title> 
  5.  
  6. <script type="text/javascript" charset="utf-8" src="phonegap.js"></script> 
  7. <script type="text/javascript" charset="utf-8"> 
  8.  
  9.     // 等待加载PHoneGap 
  10.     document.addEventListener("deviceready", onDeviceReady, false); 
  11.      
  12.     // PhoneGap加载完毕 
  13.     function onDeviceReady() { 
  14.         navigator.geolocation.getCurrentPosition(onSuccess, onError); 
  15.     } 
  16.      
  17.     // 获取位置信息成功后调用的回调函数 
  18.     function onSuccess(position) { 
  19.         var element = document.getElementById('geolocation'); 
  20.         element.innerHTML = 'Latitude: '           + position.coords.latitude              + '<br />' + 
  21.                             'Longitude: '          + position.coords.longitude             + '<br />' + 
  22.                             'Altitude: '           + position.coords.altitude              + '<br />' + 
  23.                             'Accuracy: '           + position.coords.accuracy              + '<br />' + 
  24.                             'Altitude Accuracy: '  + position.coords.altitudeAccuracy      + '<br />' + 
  25.                             'Heading: '            + position.coords.heading               + '<br />' + 
  26.                             'Speed: '              + position.coords.speed                 + '<br />' + 
  27.                             'Timestamp: '          + new Date(position.timestamp)          + '<br />'; 
  28.     } 
  29.      
  30.     // onError回调函数接收一个PositionError对象 
  31.     function onError(error) { 
  32.         alert('code: '    + error.code    + '\n' + 
  33.             'message: ' + error.message + '\n'); 
  34.     } 
  35.  
  36. </script> 
  37. </head> 
  38. <body> 
  39.     <p id="geolocation">Finding geolocation...</p> 
  40. </body> 
  41. </html> 

iPhone的特异情况

  • timestamp:单位为秒而非毫秒。

一种变通方法是手动将时间戳转换为毫秒(*1000):

  1. var onSuccess = function(position) { 
  2.     alert('Latitude: '  + position.coords.latitude             + '\n' + 
  3.         'Longitude: ' + position.coords.longitude            + '\n' + 
  4.         'Timestamp: ' + new Date(position.timestamp * 1000)  + '\n'); 
  5. }; 

PositionError

  • 当发生错误时,一个PositionError对象会传递给geolocationError回调函数。

属性

  • code:一个在下面常量列表中定义的错误代码。
  • message:说明错误细节的错误信息。

常量

  • PositionError.PERMISSIONPositionError.PERMISSION_DENIED:权限被拒绝
  • PositionError.POSITION_UNAVAILABLE:位置不可用
  • PositionError.TIMEOUT:超时

说明

  • 当使用Geolocation发生错误时,一个PositionError对象会作为geolocationError回调函数的参数传递给用户。

Coordinates

  • 一系列用来描述位置的地理坐标信息的属性。

属性

  • latitude:以十进制表示的纬度。(数字类型)
  • longitude:以十进制表示的经度。(数字类型)
  • altitude:位置相对于椭圆球面的高度,单位为米。(数字类型)
  • accuracy:以米为单位的纬度和经度坐标的精度水平。(数字类型)
  • altitudeAccuracy:以米为单位的高度坐标的精度水平。(数字类型)
  • heading:运动的方向,通过相对正北做顺时针旋转的角度指定。(数字类型)
  • speed:以米/秒为单位的设备当前地面速度。(数字类型)

说明

  • 作为Position对象的一部分,Coordinates对象是由PhoneGap创建和填充的。该Position对象会作为一个回调函数的参数返回用户。

支持的平台

  • Android
  • BlackBerry (OS 4.6)
  • BlackBerry WebWorks (OS 5.0或更高版本)
  • iPhone

简单的范例

  1. // 获取位置信息成功后调用的回调函数 
  2. var onSuccess = function(position) { 
  3.     alert('Latitude: '          + position.coords.latitude          + '\n' + 
  4.         'Longitude: '         + position.coords.longitude         + '\n' + 
  5.         'Altitude: '          + position.coords.altitude          + '\n' + 
  6.         'Accuracy: '          + position.coords.accuracy          + '\n' + 
  7.         'Altitude Accuracy: ' + position.coords.altitudeAccuracy  + '\n' + 
  8.         'Heading: '           + position.coords.heading           + '\n' + 
  9.         'Speed: '             + position.coords.speed             + '\n' + 
  10.         'Timestamp: '         + new Date(position.timestamp)      + '\n'); 
  11. }; 
  12.  
  13. // 获取位置信息出错后调用的回调函数 
  14. var onError = function() { 
  15.    alert('onError!'); 
  16. }; 
  17.  
  18. navigator.geolocation.getCurrentPosition(onSuccess, onError); 

完整的范例

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head>     
  4. <title>Geolocation Position Example</title> 
  5.  
  6. <script type="text/javascript" charset="utf-8" src="phonegap.js"></script> 
  7. <script type="text/javascript" charset="utf-8"> 
  8.  
  9.     // 设置一个当PhoneGap加载完毕后触发的事件 
  10.     document.addEventListener("deviceready", onDeviceReady, false); 
  11.      
  12.     // PhoneGap加载完毕并就绪 
  13.     function onDeviceReady() { 
  14.         navigator.geolocation.getCurrentPosition(onSuccess, onError); 
  15.     } 
  16.      
  17.     // 显示位置信息中的“Position”属性 
  18.     function onSuccess(position) { 
  19.         var div = document.getElementById('myDiv'); 
  20.      
  21.         div.innerHTML = 'Latitude: '             + position.coords.latitude  + '<br/>' + 
  22.                         'Longitude: '            + position.coords.longitude + '<br/>' + 
  23.                         'Altitude: '             + position.coords.altitude  + '<br/>' + 
  24.                         'Accuracy: '             + position.coords.accuracy  + '<br/>' + 
  25.                         'Altitude Accuracy: '    + position.coords.altitudeAccuracy  + '<br/>' + 
  26.                         'Heading: '              + position.coords.heading   + '<br/>' + 
  27.                         'Speed: '                + position.coords.speed     + '<br/>'; 
  28.     } 
  29.      
  30.     // 如果获取位置信息出现问题,则显示一个警告 
  31.     function onError() { 
  32.         alert('onError!'); 
  33.     } 
  34.  
  35. </script> 
  36. </head> 
  37. <body> 
  38.     <div id="myDiv"></div></body> 
  39. </html> 

Android的特异情况

  • altitudeAccuracy: Android设备上不支持该属性,返回值总是null。

 

责任编辑:佚名 来源: PhoneGap中国
相关推荐

2011-09-13 16:24:11

PhoneGap AP

2011-12-20 11:20:46

PhoneGap APCompass

2011-12-19 16:09:32

PhoneGap APCamera

2011-12-20 15:34:55

PhoneGap APConnection

2011-12-21 21:56:45

PhoneGap APFile

2011-12-20 17:15:52

PhoneGap APEvents

2011-12-19 15:30:25

AccelerometPhoneGap AP

2011-12-20 13:32:52

PhoneGap APContacts

2011-12-20 16:09:57

PhoneGap APDevice

2011-12-22 09:54:40

PhoneGap APMedia

2011-12-19 16:26:39

PhoneGap APCapture

2011-12-22 10:33:39

PhoneGap APNotificatio

2011-12-22 10:45:32

PhoneGap APStorage

2011-12-30 13:47:57

PhoneGap AP视频Contacts

2011-12-30 13:59:38

PhoneGap APDevice视频

2011-12-30 14:09:32

PhoneGap APCompass视频

2011-12-30 14:13:05

PhoneGap APCamera视频

2011-12-30 14:05:17

PhoneGap APConnection视频

2011-12-30 14:16:02

AccelerometPhoneGap AP视频

2011-07-05 17:29:53

PhoneGapevents
点赞
收藏

51CTO技术栈公众号