H5：地理位置 Geolocation 详解

参考标准

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方法。

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

2. 内置方法

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

geolocation.getCurrentPosition()

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

param1：successCallback()
param2：errorCallback()
param3：PositionOptions
PositionOptions 可选参数：
1
2
3
4
5
{
 	enableHighAccuracy // 获取高精度位置,默认值为false
  		timeout // 超时时长
  		maximumAge // 缓存时长
  	}

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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 可选参数：
1
2
3
4
5
{
 	enableHighAccuracy // 获取高精度位置,默认值为false
  		timeout // 超时时长
  		maximumAge // 缓存时长
  	}

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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 回调值

1
2
3
4
5
6
7
8
9
10
11
12
{
	"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 回调值

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

补充：

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