牛骨文教育服务平台(让学习变的简单)

Geolocation API(地理位置)

1、地理位置(Geolocation API)

Geolocation接口用于获取用户的地理位置。它使用的方法基于GPS或者其他机制(比如IP地址、Wifi热点、手机基站等)。

1.1 检测地理位置是否可用

if("geolocation" in navigator){
  //地理位置可用
}else{
  //地理位置不可用
}

1.2 获取当前定位

getCurrentPosition()函数可用来获取设备当前位置:

navigator.geolocation.getCurrentPosition(success,error,option);

参数说明:

  • success:成功得到位置信息时的回调函数,使用Position对象作为唯一的参数
  • error:获取位置信息失败时的回调函数,使用PositionError对象作为唯一的参数,可选项
  • options:一个可选的PositionOptions对象,可选项

注意:使用它需要得到用户的授权,浏览器会跳出一个对话框,询问用户是否许可当前页面获取他的地理位置。如果同意授权,就会调用success;如果用户拒绝授权,则会抛出一个错误,调用error。

1.2.1 授权成功

function success(position){
  //成功
}

position参数是一个Position对象。其有两个属性:timestampcoordstimestamp属性是一个时间戳,返回获得位置信息的具体时间。coords属性指向一个对象,包含了用户的位置信息,主要是以下几个值:

  • coords.latitude:纬度
  • coords.longitude:经度
  • coords.accuracy:精度
  • coords.altitude:海拔
  • coords.altitudeAccuracy:海拔精度(单位:米)
  • coords.heading:以360度表示的方向
  • coords.speed:每秒的速度(单位:米)

1.2.2 授权失败

function error(PositionError){
  //用户拒绝授权
}

PositionError 接口表示当定位设备位置时发生错误的原因。
PositionError.code 返回无符号的、简短的错误码:

  • 1 相当于PERMISSION_DENIED 地理位置信息的获取失败,因为该页面没有获取地理位置信息的权限。
  • 2 相当于POSITION_UNAVAILABLE
    地理位置获取失败,因为至少有一个内部位置源返回一个内部错误。
  • 3 相当于TIMEOUT
    获取地理位置超时,通过定义PositionOptions.timeout 来设置获取地理位置的超时时长。

1.2.3 options参数

用来设置定位行为

var option = {   
  enableHighAccuracy : true,   
  timeout : Infinity,   
  maximumAge : 0   
};

参数说明:

  • enableHighAccuracy:如果设为true,就要求客户端提供更精确的位置信息,这会导致更长的定位时间和更大的耗电,默认设为false。

  • Timeout:等待客户端做出回应的最大毫秒数,默认值为Infinity(无限)。

  • maximumAge:客户端可以使用缓存数据的最大毫秒数。如果设为0,客户端不读取缓存;如果设为infinity,客户端只读取缓存。

1.3 监视定位

watchPosition()方法可以用来监听用户位置的持续改变。它与 getCurrentPosition() 接受相同的参数,但回调函数会被调用多次。错误回调函数与 getCurrentPosition() 中一样是可选的,也会被多次调用。

var watchID = navigator.geolocation.watchPosition(success,error, options);

一旦用户位置发生变化,就会调用回调函数success。这个回调函数的事件对象,也包含timestamp和coords属性。
watchPosition() 函数会返回一个 ID,唯一地标记该位置监视器。您可以将这个 ID 传给 clearWatch() 函数来停止监视用户位置。

navigator.geolocation.clearWatch(watchID);

1.4 完整例子

<div id="myLocation"></div>

    var ml=document.getElementById("myLocation");
    function getUserLocation(){
        if("geolocation" in navigator){
            var options={
                enableHighAccuracy: true, 
		maximumAge: 30000, 
		timeout: 27000
	    };	   
             navigator.geolocation.getCurrentPosition(success,error,options);
            var watchID = navigator.geolocation.watchPosition(success,error, options);
	 }else{
	    ml.innerHTML="您的浏览器不支持定位!";
         }
    }
    function success(position){
	var coords=position.coords;
	var lat=coords.latitude;
	var lng=coords.longitude;
	ml.innerHTML="您当前所在的位置:经度"+lat+";纬度:"+lng;
        //只有firefox支持address属性
        if(typeof position.address !== "undefined"){  
		var country = position.address.country;  
		var province = position.address.region;  
		var city = position.address.city;  
		ml.innerHTML +="您的地址" + country + province + city;  
	}  
    }
    function error(error){
	switch(error.code){  
	    case error.TIMEOUT:  
		ml.innerHTML="连接超时,请重试";break;  
	    case error.PERMISSION_DENIED:  
		ml.innerHTML="您拒绝了使用位置共享服务,查询已取消";break;  
	    case error.POSITION_UNAVAILABLE:  
		ml.innerHTML="亲,非常抱歉,我们暂时无法为您提供位置服务";break;  
	}  
	ml.style.color="red";
    }
    window.onload=function(){
	getUserLocation();
    }