浏览器定位是可以使用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定位获取,虽然最后的位置都不是很准确。
评论