当前位置: > > > HTML5 - 使用Geolocation(地理定位)获取用户的位置

HTML5 - 使用Geolocation(地理定位)获取用户的位置

一、Geolocation(地理定位)

1,基本介绍

(1)虽然 Geolocation 经常以 HTML5 的名义提到,但地理定位实际上是一个单独的标准,而且也不是经由 WHATWG 制定的。
(2)通过地理定位 Geolocation API 可以获得用户的地理位置(当前位置的地理坐标)。
注意:鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。

2,浏览器支持情况

无论是桌面设备,还是移动设备。主流的浏览器都是可以支持 Geolocation 的。注意 IE 浏览器,是从 IE9 起开始支持 Geolocation

二、获取当前的定位信息

1,getCurrentPosition()方法介绍

getCurrentPosition(geo_success, geo_error?, geo_options?)
该方法用于获取当前的位置,其参数如下:
(1)geo_success:成功回调函数
(2)geo_error:失败回调函数
(3)geo_options:传递的参数。其支持的属性有:
  • timeout:指定获取地理位置的超时时间,默认不限时。单位为毫秒。
  • maximumAge:最长有效期,在重复获取地理位置时,此参数指定多久再次获取位置。默认为 0,表示浏览器需要立刻重新计算位置。
  • enableHighAccuracy:指示浏览器获取高精度的位置,默认为 false。当开启后,可能没有任何影响,也可能使浏览器花费更长的时间获取更精确的位置数据。

2,效果图 

点击“获取位置”按钮后,获取当前设备地理位置信息,并显示在页面上。

3,样例代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>GPS</title>
  <script>
    //显示结果的区域对象
    var result;

    window.onload = function(){
      result = document.getElementById("result")
    }

    //获取位置
    function getLocation(){
        if( navigator.geolocation ){
            navigator.geolocation.getCurrentPosition(
                showPosition, handleLocationError,
                {maximumAge:60000, timeout:50000, enableHighAccuracy:true}
                );
        }else{
           result.innerHTML="该设备不支持gps定位";
        }
    }

    //获取位置失败处理
    function handleLocationError(error) {
        switch(error.code){
            case 0:
              alert("获取位置信息出错!");
              break;
            case 1:
              alert("您设置了阻止该页面获取位置信息!");
              break;
            case 2:
              alert("浏览器无法确定您的位置!");
              break;
            case 3:
              alert("获取位置信息超时!");
              break;
        }
    }

    //显示位置
    function showPosition(position){
      result.innerHTML="经度: " + position.coords.latitude +
                      "<br>纬度: " + position.coords.longitude +
                      "<br>准确度:" + position.coords.accuracy +
                      "<br>海拔:" + position.coords.altitude +
                      "<br>海拔准确度:" + position.coords.altitudeAccuracy +
                      "<br>时间戳:" + position.timestamp;
    }
  </script>
</head>
<body style="font-size:100">
  <button onclick="getLocation()">获取位置</button>
  <p id="result"></p>
</body>
</html>

二、监视定位变化

1,watchPosition()方法介绍

如果我们需要设定一个回调函数来不断响应定位数据发生的变更(设备发生了移动,或获取到了更高精度的地理位置信息)。可以通过 watchPosition() 函数实现该功能。
  • watchPosition()getCurrentPosition() 接收的参数相同,但回调函数会被调用多次。
  • 我们可以直接调用 watchPosition() 函数,不需要先调用 getCurrentPosition() 函数。

2,clearWatch()方法介绍

根据传入的 watchid 来对应的位置监听活动。

3,效果图

(1)点击“开始监听”按钮后便开始监视设备的位置变化,每当定位信息有发生变化则会更新显示当前位置信息。
(2)点击“停止监听”按钮则停止对设备位置变化的监视。

4,样例代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>GPS</title>
  <script>
    //显示结果的区域对象
    var result;

    //监听定位的id
    var watchID = null

    window.onload = function(){
      result = document.getElementById("result")
    }

    //开始监听位置变化
    function beginWatch(){
        if( navigator.geolocation ){
            watchID = navigator.geolocation.watchPosition(
                      showPosition, handleLocationError,
                      {maximumAge:60000, timeout:50000, enableHighAccuracy:true}
                      );
        }else{
           result.innerHTML="该设备不支持gps定位";
        }
    }

    //停止监听位置变化
    function stopWatch() {
        navigator.geolocation.clearWatch(watchID);
    }

    //获取位置失败处理
    function handleLocationError(error) {
        switch(error.code){
            case 0:
              alert("获取位置信息出错!");
              break;
            case 1:
              alert("您设置了阻止该页面获取位置信息!");
              break;
            case 2:
              alert("浏览器无法确定您的位置!");
              break;
            case 3:
              alert("获取位置信息超时!");
              break;
        }
    }

    //显示位置
    function showPosition(position){
      result.innerHTML="经度: " + position.coords.latitude +
                      "<br>纬度: " + position.coords.longitude +
                      "<br>准确度:" + position.coords.accuracy +
                      "<br>海拔:" + position.coords.altitude +
                      "<br>海拔准确度:" + position.coords.altitudeAccuracy +
                      "<br>时间戳:" + position.timestamp;
    }
  </script>
</head>
<body style="font-size:100">
  <button onclick="beginWatch()">开始监听</button>
  <button onclick="stopWatch()">停止监听</button>
  <p id="result"></p>
</body>
</html>

评论0