浏览器定位navigator.geolocation.getCurrentPosition

XiaoA

发布于 2023-07-24 17:25:13

7350

发布于 2023-07-24 17:25:13

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

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2023-07-13，如有侵权请联系 cloudcommunity@tencent.com 删除

geolocation