最近要求web页上gps定位打卡。

查阅了相关资料后，发现html5有Navigator.geolocation的GPS定位功能，赶紧学习：

Navigator.geolocation - Web API 接口参考 | MDN

相关文档即用法。

 浏览器兼容性也是不错的。

<p id="demo">点击按钮获取您当前坐标：</p>
    <button onclick="getLocation()">按钮</button>
    <script>
        var x = document.getElementById("demo");

        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition, showError);
            } else {
                x.innerHTML = "该浏览器不支持获取地理位置。";
            }
        }

        function showPosition(position) {
            x.innerHTML = "纬度: " + position.coords.latitude +
                "<br>经度: " + position.coords.longitude +
                "<br>位置精度: " + position.coords.accuracy +
                "<br>海拔: " + position.coords.altitude +
                "<br>位置的海拔精度: " + position.coords.altitudeAccuracy +
                "<br>方向: " + position.coords.heading +
                "<br>速度: " + position.coords.speed;
        }

        function showError(error) {
            switch (error.code) {
                case error.PERMISSION_DENIED:
                    x.innerHTML = "用户拒绝对获取地理位置的请求。"
                    break;
                case error.POSITION_UNAVAILABLE:
                    x.innerHTML = "位置信息是不可用的。"
                    break;
                case error.TIMEOUT:
                    x.innerHTML = "请求用户地理位置超时。"
                    break;
                case error.UNKNOWN_ERROR:
                    x.innerHTML = "未知错误。"
                    break;
            }
        }
    </script>

export function watchPosition(location, opt) {
    return new Promise(function (resolve, reject) {
        var target = {
            latitude: 0,
            longitude: 0
        }
        if (location && Object.keys(location).length > 0) {
            target = location
        }
        var options = {
            enableHighAccuracy: false,
            timeout: 5000,
            maximumAge: 0
        }
        if (opt && Object.keys(opt).length > 0) {
            options = opt
        }
        var id = navigator.geolocation.watchPosition(success, error, options);
        function success(pos) {
            var crd = pos.coords;
            console.log("pos", crd)
            navigator.geolocation.clearWatch(id);
            let obj = {
                latitude: crd.latitude,//纬度
                longitude: crd.longitude,//经度
                accuracy: crd.accuracy,//位置精度
                altitude: crd.altitude,//海拔
                altitudeAccuracy: crd.altitudeAccuracy,//位置的海拔精度
                heading: crd.heading,//方向
                speed: crd.speed//速度
            }
            resolve({
                code: 200,
                data: obj
            })

            // if (target.latitude === crd.latitude && target.longitude === crd.longitude) {
            //     console.log('Congratulations, you reached the target');
            //     navigator.geolocation.clearWatch(id);
            // }
        }

        function error(err) {
            console.warn('ERROR(' + err.code + '): ' + err.message);
            resolve({
                code: err.code,
                message: err.message
            })
        }
    })

}

这两个方法任选择一个用就可以了。

本地localhost测试完全没有问题，上线测试，诶！watchPosition和getCurrentPosition都不工作，也不调用，查看文档后发现，需要域名是https，域名配置了https后，发现有页面可以调起watchPosition和getCurrentPosition，有些页面又是不工作，what？经过多番测试，发现html5的GPS功能要求比较严格，上下文中多有请求都要求https。最终找到有些页面的图片是http请求，所以gps功能失效。