跳到正文

浏览器定位navigator.geolocation.getCurrentPosition

浏览器定位是可以使用javascript直接获取当前你的网络所在的位置信息,主要方法为

navigator.geolocation.getCurrentPosition(function(position){});

其中position信息中包括以下内容:

经度 : position.coords.longitude

纬度 : position.coords.latitude

精度 : position.coords.accuracy

高程 : position.coords.altitude

高程精度 : position.coords.altitudeAcuracy

方向 : position.coords.heading

速度 : position.coords.speed

时间戳 : position.timestamp

在使用过程中会碰到一些浏览器的限制和权限等,我们可以做一些判断,现在基本都必须在https下才可以区取定位信息,所以我们先加一个判断:

function isHttps() {
  return 'https:' == location.protocol;
}

在调用getCurrentPosition前现在的浏览器需要一些权限提示和判断:

function browserCheck() {
    let result = {
        error : 'error',
        message : ''
    }
    return new Promise((resolve, reject) => {
        if (!isHttps()) {
            result.message = '请在https协议下请求浏览器定位';
            resolve(result);
        }
        if (navigator.permissions) {
            navigator.permissions.query({
                name: "geolocation"
            }).then(function (status) {
                if (status.state === 'granted') {
                    result.error = 'complete';
                    resolve(result);
                }
                else if(status.state === 'prompt') {
                    console.log('提示您开启浏览器定位功能');
                    result.error = 'complete';
                    resolve(result);
                }
                else {
                    result.message = '需要开启浏览器定位功能才能使用';
                    resolve(result);
                }
            }).catch((error) => {
                result.message = '需要开启浏览器定位功能才能使用';
                resolve(result);
            });
        } else {
            if ('geolocation' in navigator) {
                result.error = 'complete';
                resolve(result);
            } else {
                result.message = '浏览器不支持定位功能';
                resolve(result);
            }
        }
    });
}

最后,再使用getCurrentPosition来获取当前的位置吧

function getPosition(callback) {
    let promise = browserCheck();
    if(promise instanceof Promise) {
        promise.then(function(result) {
            if(result.error !== 'complete') {
                if(typeof callback == 'function'){
                    callback.call(null, result.error, result.message);
                }
            }
            navigator.geolocation.getCurrentPosition((position) => {
                let crd = position.coords;
                let lonLat = [crd.longitude, crd.latitude];    //这里是wgs84坐标
                let height = crd.altitude;
                if(typeof callback == 'function'){
                    callback.call(null, 'complete', {
                        point : lonLat,
                        accuracy : crd.accuracy,
                        heading: crd.heading,
                        speed: crd.speed,
                        timestamp: position.timestamp
                    });
                }
            }, (err) => {
                if(typeof callback == 'function'){
                    callback.call(null, 'error', 'ERROR(' + err.code + '): ' + err.message);
                }
            }, {
                enableHighAccuracy: true,
                timeout: 500,
                maximumAge: 5000
            });
        });
    }
    else {
        if(typeof callback == 'function'){
            callback.call(null, 'error', '获取浏览器定位失败');
        }
    }
}

最后,要注意的是因为一些原因,在chrome上会超时的,可以使用ip定位获取,虽然最后的位置都不是很准确。

评论 0

还没有评论,快来抢沙发吧。