首页 专题 H5案例 前端导航 UI框架

地理位置定位

作者:TG 日期: 2016-05-28 阅读: 548
地理位置 API 允许用户向 Web 应用程序提供他们的位置。
当然,出于隐私考虑,访问地理位置前,浏览器都会先请求用户许可。

地理位置 API 通过 navigator.geolocation 提供。
获取到用户的地理位置的前提是浏览器支持此属性,我们可以用以下代码判断:

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

当浏览器支持navigator,我们怎样去获取当前定位?
getCurrentPosition()
我们可以调用 getCurrentPosition() 函数获取用户当前定位位置。这会异步地请求获取用户位置,并查询定位硬件来获取最新信息。

navigator.geolocation.getCurrentPosition(success, error, options)

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

Position有两个属性
(1) position.timestamp: ''  获得位置的时间戳
(2)position.coords
其有七个属性值
coords.latitude:估计纬度
coords.longitude:估计经度
coords.altitude:估计高度
coords.accuracy:所提供的以米为单位的经度和纬度估计的精确度
coords.altitudeAccuracy:所提供的以米为单位的高度估计的精确度
 coords.heading: 用户设备当前移动的角度方向,相对于正北方向顺时针计算
coords.speed:以米每秒为单位的设备的当前对地速度

PositionError对象的属性
code 表示失败原因,返回1 or 2 or 3 ,具体为
    PERMISSION_DENIED (数值为1) 表示没有权限使用地理定位API
    POSITION_UNAVAILABLE (数值为2) 表示无法确定设备的位置,例如一个或多个的用于定位采集程序报告了一个内部错误导致了全部过程的失败
    TIMEOUT (数值为3) 表示超时

message 错误提示内容 

PositionOptions有三个属性
{
enableHighAccuracy:boolean , 
timeout:long , 
maximumAge:long
}
enableHighAccuracy 【true or false(默认)】是否返回更详细更准确的结构,默认为false不启用,选择true则启用,但是会导致较长的响应时间及增加功耗,这种情况更多的用在移动设备上。

timeout 设备位置获取操作的超时时间设定(不包括获取用户权限时间),单位为毫秒,如果在设定的timeout时间内未能获取位置定位,则会执行errorCallback()返回code(3)。如果未设定timeout,那么timeout默认为无穷大,如果timeout为负数,则默认timeout为0。

maximumAge 设定位置缓存时间,以毫秒为单位,如果不设置该值,该值默认为0,如果设定负数,则默认为0。该值为0时,位置定位时会重新获取一个新的位置对象;该值大于0时,即从上一次获取位置时开始,缓存位置对象,如果再次获取位置时间不超过maximumAge,则返回缓存中的位置,如果超出maximumAge,则重新获取一个新的位置。

有些时候,我们需要动态的去监视用户的位置变化,比如地图。
我们可以用watchPosition()方法去监视

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

watchPosition() 函数会返回一个 ID,唯一地标记该位置监视器。您可以将这个 ID 传给 clearWatch() 函数来停止监视用户位置。

navigator.geolocation.clearWatch(watchID);


简单例子:

<div id="myLocation"></div> <script> 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);

}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(); } </script>


关注”全栈技术杂货铺“

全栈技术杂货铺