H5：地理位置 Geolocation 详解

_midnight

已于 2022-02-04 10:52:31 修改

阅读量4.4k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： HTML5 文章标签： html5 javascript

于 2020-08-25 21:51:20 首次发布

本文链接：https://blog.csdn.net/h_midnight/article/details/108224237

HTML5 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了W3C定义的Geolocation-API实现标准，探讨了位置信息的获取依据，包括GPS、网络信号等，并深入讲解了geolocation-API的使用方法，如getCurrentPosition和watchPosition函数的参数设置及回调值解析。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考标准

W3C Recommendation 8 November 2016 (GitHub reference added 31 January 2018)

位置信息的获取依据

W3C定义geolocation-API实现标准解释为：接口与底层位置信息无关。常见的位置信息来源包括全球定位系统(GPS)和从网络信号推断出的位置，如IP地址、RFID、WiFi和蓝牙MAC地址、GSM/CDMA小区id，以及用户输入。不能保证API返回设备的实际位置。

规范中没有规定使用这些设备的先后顺序。在HTML5的实现中，手机等移动设备优先使用GPS定位。笔记本和部分平板，最准确的定位是WIFI。网线上网的台式机，一般就只能使用IP来定位了，IP准确度最低。

出于隐私保护考虑，标准规范获取地理位置必须得用户授权后才能得到地理位置信息，并且在HTTP协议下除locahost / 127.0.0.1，其它地址必须使用HTTPS协议才可正确获取。

geolocation-API 详解

1. 环境判断

geolocation是浏览器暴露的接口，所以该接口必须保证在浏览器环境下使用。并且浏览器版本支持geolocation方法。

	if ( "geolocation" in navigator ) {
		// 浏览器支持获取地理位置
	} else {
		// 浏览器不支持获取地理位置
	}

2. 内置方法

注：geolocation 接口不继承任何方法。

geolocation.getCurrentPosition()

支持三个参数，参数一是必须的也就是成功回调是必须的。

param1：successCallback()

param2：errorCallback()

param3：PositionOptions

PositionOptions 可选参数：

	{
	 	enableHighAccuracy // 获取高精度位置,默认值为false
   		timeout // 超时时长
   		maximumAge // 缓存时长
   	}

例子

	if ( "geolocation" in navigator ) {
		// 浏览器支持获取地理位置
		const successCallback = (location) => {
			console.log("获取到的地理位置：", location)
		}
		const errorCallback = (error) => {
			switch (error.code) {
	            case error.TIMEOUT:
	              	console.log("获取地理位置超时！");
	              	break;
	            case error.POSITION_UNAVAILABLE:
	              	console.log("内部错误！无法获取地理位置！");
	              	break;
	            case error.PERMISSION_DENIED:
	              	console.log("没有权限获取地理位置权限！");
	              	break;
	            default:
	              	console.log("获取地理位置异常：", error);
	              	break;
          	}
		}
		const PositionOptions = {
          	enableHighAccuracy: true,
         	timeout: 5000,
          	maximumAge: 3000,
		}
		navigator.geolocation.getCurrentPosition(
			successCallback,
			errorCallback,
			PositionOptions
		)
	}else {
		// 浏览器不支持获取地理位置
	}

geolocation.watchPosition()

支持三个参数，参数一是必须的也就是成功回调是必须的。

param1：successCallback()

param2：errorCallback()

param3：PositionOptions

PositionOptions 可选参数：

	{
	 	enableHighAccuracy // 获取高精度位置,默认值为false
   		timeout // 超时时长
   		maximumAge // 缓存时长
   	}

例子

	if ( "geolocation" in navigator ) {
		// 浏览器支持获取地理位置
		const successCallback = (location) => {
			console.log("获取到的地理位置：", location)
		}
		const errorCallback = (error) => {
			switch (error.code) {
	            case error.TIMEOUT:
	              	console.log("获取地理位置超时！");
	              	break;
	            case error.POSITION_UNAVAILABLE:
	              	console.log("内部错误！无法获取地理位置！");
	              	break;
	            case error.PERMISSION_DENIED:
	              	console.log("没有权限获取地理位置权限！");
	              	break;
	            default:
	              	console.log("获取地理位置异常：", error);
	              	break;
          	}
		}
		const PositionOptions = {
          	enableHighAccuracy: true,
         	timeout: 5000,
          	maximumAge: 3000,
		}
		navigator.geolocation.watchPosition(
			successCallback,
			errorCallback,
			PositionOptions
		)
	} else {
		// 浏览器不支持获取地理位置
	}

geolocation.clearWatch()

支持一个参数：

param1：geolocation Id

例子

	if ( "geolocation" in navigator ) {
		// 浏览器支持获取地理位置
		const successCallback = (location) => {
			console.log("获取到的地理位置：", location)
		}
		const errorCallback = (error) => {
			switch (error.code) {
	            case error.TIMEOUT:
	              	console.log("获取地理位置超时！");
	              	break;
	            case error.POSITION_UNAVAILABLE:
	              	console.log("内部错误！无法获取地理位置！");
	              	break;
	            case error.PERMISSION_DENIED:
	              	console.log("没有权限获取地理位置权限！");
	              	break;
	            default:
	              	console.log("获取地理位置异常：", error);
	              	break;
          	}
		}
		const PositionOptions = {
          	enableHighAccuracy: true,
         	timeout: 5000,
          	maximumAge: 3000,
		}
		var getLocation = navigator.geolocation.watchPosition(
			successCallback,
			errorCallback,
			PositionOptions
		)
		setTimeout(() => {
           	navigator.geolocation.clearWatch(getLocation);
		}, 1000 * 60)
	} else {
		// 浏览器不支持获取地理位置
	}

3. 回调值

success 回调值

	{
		"coords": {
			"latitude": Number, // 十进制的维度。
			"longitude": Number, // 十进制的经度。
			"altitude": Number || null, // 高度，以 WGS84 椭球面上的米为单位指定。
			"accuracy": Number, // 经纬度的精度级别，米为单位，非负的实数。
			"altitudeAccuracy": Number || null, // 高度精度，米为单位，非负的实数。
			"heading": Number || null, // 设备的移动方向，以度数表示，其中0°≤heading < 360°，相对真北顺时针计算。如果设备是静止的则表示为0。
			"speed": Number || null // 移动速度，米/每秒，非负实数。
		},
		"timestamp": Number // 获取地理位置的时间，返回为时间戳。
	}

error 回调值

	{
		"code": number, // 错误代码，1.没有权限、2.内部错误、3.超时
		"message": string // 错误描述
	}

补充：

使用chrome在电脑中测试，需要可以访问到https://www.googleapis.com/。通过抓包分析，在PC端chrome中使用Geolocation时，是通过访问https://www.googleapis.com/去获取到的信息。
通过百度地图提供的接口 http://api.map.baidu.com/geocoder?location=41.047669,116.313082&output=json，替换经纬度可解析出城市信息。测试只有国内的经纬度可用。