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方法。
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，替换经纬度可解析出城市信息。测试只有国内的经纬度可用。