HTML 地理定位

简介

Geolocation API 定义了位置信息的高级接口,例如纬度和经度。 常见的位置信息源包括全球定位系统(GPS)和从网络信号推断的位置,例如IP地址,RFID,WiFi和蓝牙MAC地址,以及GSM / CDMA小区ID,以及用户输入。不保证 API 返回设备的实际位置。旨在实现 “一次性” 位置请求和重复位置更新,以及显式查询缓存位置的能力。除非用户同意,否则用户位置信息是不可用的。

兼容性

IE9 以及以上和主流浏览器均支持

地理位置服务检查

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地理位置服务检查</title>
    <script type="text/javascript">
        function checkGeolocation() {
            var msg =  navigator.geolocation ? "支持"  : "不支持";
            document.getElementById("result").innerText = "你的浏览器" +  msg + "地理位置服务"
        }
    </script>
</head>
<body>
<input onclick="checkGeolocation()" type="button" value="检查服务"/>
<span id="result"></span>
</body>
</html>

效果:

获取位置信息

获取当前定位
通过 void getCurrentPosition(successCallback,[errorCallback],[options]),异步地请求获取用户位置,当定位被确定后,定义的回调函数就会被执行。
方法有三个参数:

  • 第一个参数 successCallback 是获取位置成功后回调,类型是 PositionCallback,包含 Position 参数返回,而 Position 的结构可以看下面的定义,最后通过 Coordinates 就可以获取经纬度;

PositionCallback 接口结构分析:

interface PositionCallback {
    (position: Position): void;
}

interface Position {
    readonly coords: Coordinates;
    readonly timestamp: number; //响应时间
}

interface Coordinates {
    readonly accuracy: number; //位置精度
    readonly altitude: number | null;//海拔
    readonly altitudeAccuracy: number | null; //位置的海拔精度
    readonly heading: number | null; //方向(从正北开始,单位"度“)
    readonly latitude: number; //十进制数的纬度
    readonly longitude: number;//十进制数的纬度
    readonly speed: number | null;//速度(米/每秒)
}
  • 第二个参数 errorCallback 是获取位置过程中任何错误的回调(可选值),类型是 PositionErrorCallback,包含 PositionError 参数返回,其中 error.code 是错误码,error.message是错误信息,相关定义如下:
interface PositionErrorCallback {
    (error: PositionError): void;
}

interface PositionError {
    readonly code: number;
    readonly message: string;
    toString(): string;
    readonly PERMISSION_DENIED: number;
    readonly POSITION_UNAVAILABLE: number;
    readonly TIMEOUT: number;
}
  • 第三个参数 options 是 PositionOptions 接口(可选值),定义和说明如下;
interface PositionOptions {
    enableHighAccuracy?: boolean; //是否获取高精度位置,默认为 false;
    maximumAge?: number; //位置信息有效期,默认是0,单位为毫秒,表示不暂存位置信息;
    timeout?: number; //获取位置信息的超时时间,默认不限时(Infinity),单位为毫秒;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取位置信息</title>
    <script type="text/javascript">
        function getCurrentPosition() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(successCallback, errorCallback, {
                    maximumAge: 3000,
                    enableHighAccuracy: true,
                    timeout: 5000
                });
            }
            else {
                alert("你的浏览器不支持地理位置服务");
            }
        }
        function successCallback(position) {
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;
            document.getElementById("result").innerText = "纬度:" + latitude + ",经度:" + longitude;
        }
        function errorCallback(error) {
            var errormsg = document.getElementById("errorMsg");
            errormsg.innerText = "错误码:" + error.code + " 信息:" + error.message;
        }
    </script>
</head>
<body>
<label for="result">当前的位置:</label>
<span id="result"></span><br>
<label for="errorMsg">错误信息:</label>
<span id="errorMsg"></span><br>
<input onclick="getCurrentPosition()" type="button" value="获取位置"/>
</body>
</html>

效果:

监视定位
通过 number watchPosition(successCallback,[errorCallback],[options]),监听定位数据发生的变更时候回调,它的参数和 getCurrentPosition() 方法一致,区别是它会随位置信息变化调用多次;
函数执行后会返回一个唯一的 watchID 标记该位置监视器。您可以将这个 ID 传给 clearWatch() 函数来停止监视用户位置,具体参数和 getCurrentPosition(successCallback,[errorCallback],[options]) 是一样的,参照上面就可以。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>监听位置信息</title>
    <script type="text/javascript">
        var watchID;
        function watchPosition() {
            if (navigator.geolocation) {
                document.getElementById("result").innerText = "监听已经开始";
                watchID =  navigator.geolocation.watchPosition(successCallback,errorCallback, {
                    maximumAge: 3000,
                    enableHighAccuracy: true,
                    timeout: 5000
                });
            }
            else {
                alert("你的浏览器不支持地理位置服务");
            }
        }
        function successCallback(position) {
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;
            document.getElementById("result").innerText = "纬度:" + latitude + ",经度:" + longitude;
        }
        function errorCallback(error) {
            var errormsg = document.getElementById("errorMsg");
            errormsg.innerText = "错误码:" + error.code + " 信息:" + error.message;
        }
        function clearWatch() {
            if (navigator.geolocation) {
                navigator.geolocation.clearWatch(watchID);
                document.getElementById("result").innerText = "监听已经停止";
            }
            else {
                alert("你的浏览器不支持地理位置服务");
            }
        }
    </script>
</head>
<body>
<input onclick="watchPosition()" type="button" value="开始监听位置"/>
<input onclick="clearWatch()" type="button" value="停止监听位置"/>
<label for="result">当前的位置:</label>
<span id="result"></span>&nbsp;&nbsp;&nbsp;<label for="errorMsg">错误信息:</label><span id="errorMsg"></span>
</body>
</html>

效果:

附录

常量 说明
PositionError.PERMISSION_DENIED 用户拒绝对获取地理位置的请求
PositionError.POSITION_UNAVAILABLE 位置信息是不可用的
PositionError.TIMEOUT 请求用户地理位置超时

留下评论

电子邮件地址不会被公开。 必填项已用*标注