HTML5地理位置

时间:2020-01-09 10:34:38  来源:igfitidea点击:

HTML地理位置功能使Web应用程序可以获得网站访问者的地理位置。地理位置实际上并不是HTML5规范的一部分,但是由于HTML5已成为HTML和JavaScript中所有新功能的事实上的标签,因此我在此HTML5教程中包括了地理位置。

安全与隐私

用户必须接受网站通过浏览器对话框访问其位置,因此我们不能在访客不知情的情况下使用它来监视访客。

访问地理位置

通过浏览器中的navigator.geolocation对象可以通过JavaScript访问地理位置。地理位置对象使我们可以通过两个主要功能访问地理位置:

  • getCurrentPosition()
  • watchPosition()

" getCurrentPosition()"函数将访问者的位置作为一次性快照返回。每当位置更改时," watchPosition()"函数都会返回访问者的位置。通过在位置发生变化时调用给定的成功或者错误回调函数来执行此操作。

这两个函数均采用以下参数:

  • 成功回调函数
  • 错误回调函数(可选)
  • 地理位置选项对象(可选)

如我们所见,某些参数是可选的。这是一个访问用户地理位置并将仅成功回调函数传递给getCurrentPosition()的示例:

navigator.geolocation.getCurrentPosition(
    function(position) {
        alert("your position is: "
                + position.coords.latitude + ", "
                + position.coords.longitude);
    }
);

要尝试该示例,请单击以下按钮:

函数getCurrentPositionExample1(){navigator.geolocation.getCurrentPosition(function(position){alert("位置是:" + position.coords.latitude +"," + position.coords.longitude);}); }

地理位置是异步获取的。这意味着,当我们调用getCurrentPosition()或者watchPosition()时,这些函数会立即返回。当浏览器知道用户的位置,并且用户已经接受网站可以访问地理位置时,将调用成功回调函数。如果发生错误,则会调用错误回调函数。

位置对象

传递给成功回调函数的position对象如下所示:

double latitude         // read only attribute
double longitude        // read only attribute
double accuracy         // read only attribute

double altitude         // read only attribute
double altitudeAccuracy // read only attribute
double heading          // read only attribute
double speed            // read only attribute

纬度和经度属性包含位置的地理坐标。 " accuracy"属性包含以米为单位的位置精度。精度越低,位置越精确。

仅当运行浏览器的设备嵌入了GPS时," altitude"," altitudeAccuracy"," heading"和" speed"才可用。否则,这些属性将设置为" null"。

" altitude"属性包含用户的海拔高度。 " altitudeAccuracy"包含以米为单位的高度精度。标题属性告诉用户移动的方向。该值相对于真实北方的度数(0-360)。 "速度"属性包含用户的速度(以米/秒为单位)(如果有)。

速度

如果我们使用的是watchPosition()方法,则speed属性似乎只有一个值。浏览器显然需要一些位置才能计算出速度。

错误回调函数

如果获取用户地理位置失败,则将调用传递给getCurrentPosition()或者watchPosition()的错误回调函数。无法获取地理位置可能由于以下原因而失败:

  • 用户拒绝网站访问地理位置。
  • 运行浏览器的设备无法获取地理位置,例如如果设备在无法接收GPS卫星信号的隧道,地下等中。
  • 设备获取位置的时间过长,通话超时。

错误回调函数接收具有两个属性的对象,如下所示:

short     code    // unsigned read only attribute.
DOMString message // read only attribute.

" code"属性的值将是以下之一:

  • " 1",表示PERMISSION_DENIED
  • " 2",表示POSSITION_UNAVAILABLE
  • 3,表示超时

" message"属性包含错误的文字描述。此错误可能对开发人员有用,但对网站用户而言可能没有多大意义。

地理位置选项对象

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

enableHighAccuracy     // true or false
    timeout                // milliseconds
    maximumAge             // milliseconds

enableHighAccuracy属性可以是true或者false。值为true会向浏览器发出信号,如果运行浏览器的设备具有GPS,则应将其启用。请记住,GPS消耗大量电能,因此除非需要高精度,否则不要要求将其启用。

timeout属性告诉浏览器尝试获取位置之前要等待多长时间,然后超时并调用错误回调函数而不是成功回调函数。

" maximumAge"属性告诉浏览器应用程序可接受的缓存位置的最长期限(以毫秒为单位)。值为0表示浏览器必须在每次调用成功回调函数时获得一个新位置。

完整的HTML5地理位置示例

这是同时使用成功回调处理程序,错误回调处理程序和选项对象的代码示例:

navigator.geolocation.getCurrentPosition(
    function(position) {
        alert("your position is: "
                + position.coords.latitude + ", "
                + position.coords.longitude);
    }
    ,
    function(errorObject) {
        alert("Error obtaining position");
    }
    ,
    {
      enableHighAccuracy : true,
      timeout    : 3000,
      maximumAge : 60000
    }
);