Geolocation API

HTML5 中，window.navigator 对象新增了一个 geolocation 属性，可以使用 Geolocation API 对该属性进行访问。

地理位置 API 允许用户向 Web 应用程序提供他们的位置。出于隐私考虑，报告地理位置会先请求用户许可。

取得当前地理位置

异步请求获取用户位置，并查询定位硬件来获取最新信息。

语法：

/**
 * @param onSuccess：必选，获取当前地理位置信息成功时执行的回调函数
 * @param onError：可选，获取当前地理位置信息失败时执行的回调函数
 * @param options：可选，可选属性列表
 */
void getCurrentPosition(onSuccess, onError, options);

使用方法：

navigator.geolocation.getCurrentPosition(function(position)) {
    // 获取成功时的处理
}, function(error) {
    // 获取失败时的处理
}, {
    // 设置可选属性
}

注意事项：
默认情况下，getCurrentPosition() 会尽快返回一个低精度结果，这在开发人员不关心精确度，只关心快速获取结果的情况下很有用。有 GPS 的设备可能需要一分钟或更久来获取 GPS 定位，在这种情况下 getCurrentPosition() 会返回低精度数据（基于 IP 的定位或 Wi-Fi 定位）。

position 对象：

来源：获取地理位置信息成功，则可以在获取成功后的回调函数中获得 position 对象。
属性：
- latitude：当前地理位置的纬度。
- longitude：当前地理位置的经度。
- altitude：当前地理位置的海拔高度（不能获取时为 null）。
- accuracy：获取到的纬度或经度的精度（以米为单位）。
- heading：设备的前进方向。用面朝正北方向的顺时针旋转角度来表示（不能获取时为 null）。
- speed：设备的前进速度（以米/秒为单位，不能获取时为 null）。
- timestamp：获取地理位置信息时的时间。

error 对象：

来源：获取地理位置信息失败，则可以在获取失败后的回调函数中或的 error 对象。
注意：当在浏览器中打开使用了 Geolocation API 来获得用户当前位置信息的页面时，浏览器会询问用户是否共享位置信息，如果用户在该页面中拒绝共享，也会引起错误的产生。
属性：
- code：
  - 1：用户拒绝了位置服务；
  - 2：获取不到位置信息；
  - 3：获取信息超时错误。
- message：字符串，在该字符串中包含错误信息。
示例：

navigator.geolocation.getCurrentPosition(
    function(position) {
        // 成功时执行的操作
    },
    // 捕获错误信息
    function(error) {
        var errorTypes = {
            1 : '位置服务被拒绝',
            2 : '获取不到位置信息',
            3 : '获取信息超时'
        };
        alert(errorTypes[error.code] + ": 不能确定你的当前地理位置。");
    }
};

可选属性列表：

enableHighAccuracy：是否要求高精度的地理位置信息，这个参数在很多设备上设置了都没用，因为使用在设备上时需要结合设备电量、具体地理情况来综合考虑。因此，多数情况下把该属性设为默认，由设备自身来调整。
timeout：对地理位置信息的获取操作做一个超时限制（单位为毫秒）。如果在该时间内未获取到地理位置信息，则返回错误。
maximumAge：对地理位置信息进行缓存的有效时间（单位为毫秒）。例如 maximumAge: 120000。如果 10 点整的时候获取过一次地理位置信息，10：01 的时候，再次调用 navigator.geolocation.getCurrentPosition 重新获取地理位置信息，则返回的依然为 10：00 时的数据（因为设置的缓存有效时间为 2 分钟）。超过这个时间后缓存的地理位置信息被废弃，尝试重新获取地理位置信息。如果该值被指定为 0，则无条件重新获取新的地理位置信息。

getCurrentPosition() 示例：

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <title>获取当前位置的地理信息示例</title>
</head>
<body>
    <div id="map" style="width: 400px; height: 400px"></div>
    <script>
        function showObject(obj, k) {
            // 递归显示 object
            if(!obj) {
                return;
            }
            for(var i in obj) {
                if(typeof(obj[i) != 'object' || obj[i] == null) {
                    for(var j = 0; j < k; j++) {
                        document.write("    ");
                    }
                    document.write(i + " : " + obj[i] + "<br/>");
                } else {
                    document.write(i + " : " + "<br/>");
                    showObject(obj[i], k + 1);
                }
            }
        }
        function get_location() {
            if(navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(show_map, handle_error, {
                    enableHighAccuracy : true,
                    maximumAge : 1000
                })
            } else {
                alert("你的浏览器不支持使用 HTML 5 获取地理位置信息。");
            }
        }
        function handle_error(err) {
            // 错误处理
            switch(err.code) {
                case 1 :
                    alert("位置服务被拒绝。");
                    break;
                case 2 :
                    alert("暂时获取不到位置信息。");
                    break;
                case 3 :
                    alert("获取信息超时。");
                    break;
                default :
                    alert("未知错误。");
                    break;
            }
        }
        function show_map(position) {
            // 显示地理信息
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;
            showObject(position, 0);
        }
        get_location();
    </script>
</body>
</html>

持续监视当前地理位置的信息

使用 watchPosition 方法来持续获取用户的当前地理位置信息,它会定期自动获取。

语法：

/**
 * 参数和 getCurrentPosition 方法的参数说明与使用方法相同。
 * @return int 返回一个 ID，唯一地标记该位置监视器，作为 clearWatch() 的参数来停止监视用户位置。
 */
int watchPosition(onSuccess, onError, options);

注意事项：可以直接调用 watchPosition() 函数，不需要先调用 getCurrentPosition() 函数。

停止获取当前用户的地理位置信息

使用该方法可以停止对当前用户的地理位置信息的监视。

/**
 * @param watchId watchPosition() 返回的整数值
 */
void clearWatch(watchId);

浏览器兼容情况：

浏览器兼容情况

浅谈 HTML5 Geolocation

浅谈 HTML5 Geolocation

Geolocation API

取得当前地理位置

position 对象：

error 对象：

可选属性列表：

getCurrentPosition() 示例：

持续监视当前地理位置的信息

停止获取当前用户的地理位置信息

浏览器兼容情况：

推荐阅读更多精彩内容