几个有用的Web API——地理位置API

API用法——一个对象三个方法

navigator.geolocation返回一个geolocation对象，该对象有一个方法getCurrentPosition()，该方法是一个异步请求，会去调Google的api，所以可能需要翻墙，调用方法：

navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options);

successCallback定位成功后回调，返回一个position对象，其大概结构是这样的： geolocation对象

coords.latitude: 十进制数的纬度

coords.longitude: 十进制数的经度

coords.accuracy: 位置精度

coords.altitude: 海拔，海平面以上以米计

coords.altitudeAccuracy: 位置的海拔精度

coords.heading: 方向，从正北开始以度计

coords.speed: 速度，以米/每秒计

timestamp: 响应的日期/时间

errorCallback定位失败时返回错误信息，大致这样：

geolocation对象

code: 错误编码：
		1: 用户禁止了定位信息获取，
		2: 为网络不可用或连接卫星失败，
		3: 为获取定位所花费的时间过长，
		0: 为出现未知错误

message: 错误信息

options是一些设置参数，可以设置最大超时时间等。

{
  	enableHighAccuracy: true, //是否尝试更精确地读取纬度和经度，移动设备上，这可能要使用手机上的GPS，这会消耗移动设备更多的电量，定位所需时间也会更长，默认为false
  	maximumAge: 30000,  //缓存时间
  	timeout: 27000 //等待响应的最大时间，默认是0毫秒，表示无穷时间
}

除此之外，navigator.geolocation还有两个有用的方法：watchPosition和clearWatch。前者是一个跟踪器，可根据设备的地理位置异步返回实时位置信息，实现实时位置追踪，调用方式与getCurrentPosition一样。该方法返回唯一的watcher ID，可用clearWatch(ID)关掉追，有点像setInterval和clearInterval的工作方式。

var watcherId = navigator.geolocation.watchPosition(successCallback, errorCallback, options); //启动追踪

navigator.geolocation.clearWatch(watcherId); //关闭追踪

Demo1: 原生geolocation.getCurrentPosition

主要代码：

onGetGeoLocation () {
	if('geolocation' in navigator) {
		let center,
			map,
			marker,
			options = {
			enableHighAccuracy: false,
			maximumAge: 10 * 1000,
			timeout: 30 * 1000,
		};

		navigator.geolocation.getCurrentPosition(position => {
			console.log(position);
			this.errMsg = '';
			//获取经纬度
			center = [position.coords.longitude, position.coords.latitude];
			//借助高德地图，通过经纬度显示位置
			map = new AMap.Map('geolocation-container', {
						resizeEnable: true,
						zoom: 15,
						center: center
					}),
			marker = new AMap.Marker({
				position: center,
				map: map
			});
		}, err => {
			console.log(err);
			errMsg = err.message || '出错';
		}, options);
	} else {
		alert('您的浏览器不支持定位');
	}
}

几点注意

定位功能的主要影响因素

影响定位功能的主要因素是网络。

定位功能在移动网络环境里，是通过基站定位或者WIFI定位，获取定位信息成功率高，速度快。

若是在物理网络环境里，则有点复杂，首先，浏览器调用其对应的定位服务器的定位接口，然后定位服务器连接卫星，以用户的IP地址进行定位，再将定位信息返回浏览器传给用户。由于涉及浏览器与定位服务器连接是否成功、定位服务器与卫星连接是否成功两方面因素的影响，固定位成功率很难保证。

GPS定位由于信号比较薄弱的关系定位成功率比较低，就算成功定位，需要花费的时间也很长，一般使用GPS定位的同时都会使用基站和WIFI辅助定位。

定位精准度

关于定位精准度问题，由于绝大多数情况下，设备的定位信息是通过WIFI定位方式返回，误差一般在几十米之内。 (因为GPS定位耗时过长一般会被略过，基站定位精准度较低，优先级不如WIFI定位。)

而getCurrentPosition的配置参数里的enableHighAccuracy设置为true，仅仅是启用GPS定位，根据GPS定位的特性，应用中使用的机会不多。所以一般都用默认flase就足够了。

注意

Chrome、IOS10+等已不再支持非安全域的浏览器定位请求

总之，单纯的浏览器定位由于种种原因，很——不——准😂 。

如果用于业务开发，可以借助第三方地图工具，如高德地图的AMap.Geolocation插件，融合了浏览器定位、高精度IP定位、安卓定位sdk辅助定位等多种手段，提供了获取当前准确位置、获取当前城市信息、持续定位(浏览器定位)等功能。

Demo2: 高德地图插件AMap.Geolocation

主要代码：

let map = new AMap.Map('geolocation-container2', {
				resizeEnable: true,
				zoom: 15
			});

	map.plugin('AMap.Geolocation', function() {
        let geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,//是否使用高精度定位，默认:true
            timeout: 10000,          //超过10秒后停止定位，默认：无穷大
            buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            zoomToAccuracy: true,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            buttonPosition:'RB'
        });
        map.addControl(geolocation);
        geolocation.getCurrentPosition();
        AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
        AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
    });
function onComplete (data) {
	console.log(data);
}

function onError (data) {
	console.log(data);
}

# 几个有用的Web API——地理位置API

# API用法——一个对象三个方法

# Demo1: 原生geolocation.getCurrentPosition

# 几点注意

# 定位功能的主要影响因素

# 定位精准度

# Demo2: 高德地图插件AMap.Geolocation

# 参考资料