html5 使用Geolocation来获取经纬度地址

以前如果要获取互联网用户所在地都是根据用户的IP地址来获取地理位置,这样获取到的数据和真实数据有很大的偏差。为了获取更加精确的位置,可以使用了html5的geolocation来获取经纬度,然后再获取所在地理位置,如何获取,我在下面会说到。先说下基本概念。

Geolocation在的navigator 对象中,我们可以通过 navigator.geolocation 来使用它。不支持 geolocation 的浏览器并不包含这一对象,那么可以通过下面的代码来做能力检测,对不同的浏览器做不同的处理。在访问 geolocation 对象时,即调用 geolocation 下面的方法时,浏览器会弹出提示,询问用户是否许可网站提供的位置服务,只有在得到用户许可过后,服务才会继续,否则将被停止。 

常用的navigator.geolocation对象有以下三种方法:

获取当前地理位置:navigator.geolocation.getCurrentPosition(success_callback_function, error_callback_function, position_options)

持续获取地理位置:navigator.geolocation.watchPosition(success_callback_function, error_callback_function, position_options)

清除持续获取地理位置事件:navigator.geolocation.clearWatch(watch_position_id)  

参数position_options是配置项,由JSON格式传入:

enableHighAccuracy:true/false,它将告诉浏览器是否启用高精度设备,所谓的高精度设备包含但不局限于前面所提到的 GPS 和 WIFI,值为 true 的时候,浏览器会尝试启用这些设备,默认指为 true,在这种情况下,浏览器会尽可能地进行更为精确的查询,简单地说,如果用户有可用的 GPS 设备,会返回 GPS 设备的查询结果,IP 是最后的选择,对于移动设备来说,网络接入点(基站)或许成为另一个选择,对此我还没有完全了解,但根据测试,即时没有任何额外功能的手机,也能够得到更为精确的查询结果。

maximumAge:单位毫秒,告诉设备缓存时间,主要用于设备的省电或者节省带宽方面。

timeout:单位毫秒,超时事件,获取位置信息时超出设定的这个时长,将会触发错误,捕获错误的函数将被调用,并且错误码指向TIMEOUT。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var position_option = {
                
enableHighAccuracy: 
true
,
                
maximumAge: 
30000
,
                
timeout: 
20000
            
};
navigator.geolocation.getCurrentPosition(getPositionSuccess, getPositionError, position_option);
function getPositionSuccess( position ){
        
var lat = position.coords.latitude;
        
var lng = position.coords.longitude;
        
alert( 
"您所在的位置: 纬度"
 
  lat   
",经度"
 
  lng );
        
if
(typeof position.address !== 
"undefined"
){
                
var country = position.address.country;
                
var province = position.address.region;
                
var city = position.address.city;
                
alert(
' 您位于 '
 
  country   province   
'省'
 
  city  
'市'
);
        
}
}

 

coords其他返回信息:

coords.accuracy:返回经纬度的精度(米)

coords.speed :速度

coords.altitude :当前的高度,海拔(米)

coords.altitudeAccuracy:高度的精度(米)

coords.heading:朝向

1
2
3
4
5
6
7
8
9
10
11
12
13
function
 
getPositionError(error) {
    
switch
 
(error.code) {
        
case
 
error.TIMEOUT:
            
alert(
"连接超时,请重试"
);
            
break
;
        
case
 
error.PERMISSION_DENIED:
            
alert(
"您拒绝了使用位置共享服务,查询已取消"
);
            
break
;
        
case
 
error.POSITION_UNAVAILABLE:
            
alert(
"获取位置信息失败"
);
            
break
;
    
}
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值