HTML5 - 使用Geolocation（地理定位）获取用户的位置

作者：hangge | 2015-08-21 10:40

一、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>

HTML5 / CSS3