柠檬铺

HTML地理定位特性使得你的web应用程序可以获得网站浏览者的地理位置。地理位置实际上并不是HTML5规范的一部分，但是因为HTML5已经成为HTML和JavaScript新特性事实上的标杆，我在这个HTML5教程中介绍地理位置。

 
安全和隐私
用户通过浏览器对话框接受您的网站访问他们的位置，所以你不能在它们不知道的情况下使用它进行间谍活动。

 

访问地理位置

地理位置可以在JavaScript中通过浏览器的navigator.geolocation对象访问。地理位置对象允许你通过两个基本方法访问地理位置：

1. getCurrentPosition()
2. watchPosition()

 

getCurrentPositio()函数以一次性快照的形式返回游客的位置。watchPosition()函数在每次位置变化的时候返回游客的位置。它通过位置变化时调用成功或错误的回调函数来实现。

 

这两个函数需要以下参数：

• 成功回调函数
• 错误回调函数（可选）
• 地理位置选择对象（可选）

正如你看到的，一些参数是可选的。 下面是一个例子,通过getCurrentPosition()的成功回调函数访问用户的地理位置：

1	navigator.geolocation.getCurrentPosition(

 

2	function(position) {

 

3	alert("your position is: "

 

4	+ position.coords.latitude + ", "

 

5	+ position.coords.longitude);

 

6

}

 

7

);

 

地理位置是异步获取的。这意味着，当你调用getCurrentPosition()或watchPosition()时函数会立即返回。 当浏览器知道用户的位置，并且用户已经同意该网站可以访问自己的地理位置，成功回调函数被调用。如果发生错误，错误回调函数被调用。

 

位置对象

传递给成功回调函数的位置对象大致如下：

1	double latitude         // read only attribute

 

2	double longitude        // read only attribute

 

3	double accuracy         // read only attribute

 

4

 

5	double altitude         // read only attribute

 

6	double altitudeAccuracy // read only attribute

 

7	double heading          // read only attribute

 

8	double speed            // read only attribute

 

latitude(纬度)和longitude(经度)属性为地理位置坐标。accuracy属性为位置精度(米)。accuracy越小，精度越高。

 

altitude, altitudeAccuracy, heading和speed属性只有当运行浏览器的设备内置GPS时才可用，否则这些属性的值为null。

 

altitude属性为用户的海拔高度。altitudeAccuracy属性为海拔高度精度(米)。heading属性表示用户移动的方向。value属性是相对于正北的角度（0-360）。 speed属性为用户的速度(米每秒)，如果有的话。

 

速度

速度属性只有在你使用watchPosition()方法时才有值。浏览器显然需要几个位置来计算计算速度。

 

错误回调函数

如果无法获得用户的地理位置，传递给getCurrentPosition()或watchPosition()的错误回调函数将会被调用。无法获得地理位置的原因可能如下：

• 用户拒绝网站访问地理位置。
• 运行浏览器的设备无法获得地理位置，例如，在隧道、地铁等设备无法接收GPS卫星信号的地方。
• 该设备获取位置的时间超时。

 

错误回调函数接受一个带有两个属性的对象：

1	short     code    // unsigned read only attribute.

 

2	DOMString message // read only attribute.

 

code属性的值是下面中一个：

• 1表示PERMISSION_DENIED
• 2表示POSSITION_UNAVAILABLE
• 3表示TIMEOUT

message属性包含对错误的描述。对于开发人员来说，这个错误可能是有用的，但对网站的用户来说可能没有太大的意义。

 

地理位置选项对象

getCurrentPosition()和watchPosition()函数可以使用地理位置选项对象作为第三个参数。此选项对象可以包含以下属性：

1	enableHighAccuracy     // true or false

 

2	timeout                // milliseconds

 

3	maximumAge             // milliseconds

 

enableHighAccuracy属性可以是true或false。值为true时告诉浏览器如果设备有GPS的话，就启用它。要记住GPS耗费很多的电量，除非需要很高的精度不要启用它。

 

Timeout属性告诉浏览器要用多长时间来获取到位置并调用成功回调函数，否则调用失败回调函数。

 

maximumAge属性告诉浏览器你的应用可以接受的缓存位置的最长时间(以毫秒为单位)。值为0意味着浏览器必须在每次调用成功回调函数时都获取一个新的位置。

 

一个完整的例子

下面是一个代码示例，使用了成功回调、错误回调和选项对象：

01	navigator.geolocation.getCurrentPosition(

 

02	function(position) {

 

03	alert("your position is: "

 

04	+ position.coords.latitude + ", "

 

05	+ position.coords.longitude);

 

06

}

 

07

,

 

08	function(errorObject) {

 

09	alert("Error obtaining position");

 

10

}

 

11

,

 

12

{

 

13	enableHighAccuracy : true,

 

14	timeout    : 3000,

 

15	maximumAge : 60000

 

16

}

 

17

);

 

 

OSCHINA原创翻译， 原文链接 http://css.dzone.com/articles/html5-geo-location