HTML5地理定位Geolocation

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/my_study_everyday/article/details/84981101

【一起探讨，微信公众号：qdgithub】

地理位置定位原理介绍

地理定位的几种方式

• IP地址
• GPS
• WiFi
• GSM/CDMA

地理定位获取流程：

1. 用户打开需要获取地理位置的web应用
2. 应用向浏览器请求地理位置，浏览器弹出询问，询问用户是否共享地理位置。
3. 假设用户允许，浏览器从设备查询相关信息。
4. 浏览器将相关信息发送到一个信任的位置服务器，服务器返回具体的地理位置。

HTML5地理位置的实现：

1. 实现基于浏览器（无需后端支持）获取用户的地理位置技术
2. 精确定位用户的地理位置（精度最高达到10m之内，依赖设备）
3. 持续追踪用户的地理位置
4. 与Google Map 或者 Baidu Map 交互呈现位置信息。

HTML5中地理位置定位的方法

关于Geolocation对象

Geolocation API 用于将用户当前地理位置信息共享给信任的站点，这涉及用户的隐私安全问题，所以当一个站点需要获取用户的当前地理位置，浏览器会提示用户是否允许获取当前位置。

哪些浏览器支持Geolocation API
IE9.0+、FF3.5+、Safari5.0+、Opera10.6+、Iphone3.0+、Android2.0+

if(navigator.geolocation){
    alert('浏览器支持 geolocation');
}else{
    alert('浏览器不支持 geolocation');
}

Geolocation API存在于navigator对象中，只包含3个方法

1. getCurrentPosition 当前位置
2. watchPosition 监视位置
3. clearWatch 清除监视

1.getCurrentPosition

getCurrentPosition(success, error, option)方法最多可以有三个参数

• success是成功获取位置信息的回调函数，它是方法唯一必须的参数；
• error是用于捕获位置信息出错的情况
• option是配置项

// 第一个参数
navigator.geolocation.getCurrentPosition(function(p){   
    console.log('经度' + p.coords.longitude); 
    console.log('纬度:' + p.coords.latitude);  
    console.log('准确角' + p.coords.accuracy);
    console.log('海拔高度' + p.coords.altitude); 
    console.log('海拔高度的精确度' + p.coords.altitudeAcuracy);
    console.log('行进方向' + p.coords.heading);
    console.log('地面速度' + p.coords.accuracy);
    console.log('国家' + p.address.country);
    console.log('省份' + p.address.region);
    console.log('城市' + p.address.city);
})

// 第二个参数
navigator.geolocation.getCurrentPosition(...,function(error){   
    switch(error.code){
        case error.TIMEOUT:
            alert('连接超时，请重试');
            break;
        case error.PERMISSION_DENIDE:
            alert('您拒绝了使用位置共享服务');
            break;
        case error.POSITION_UNAVAUKABKE:
            alert('您所在的星球不提供位置服务');
            break;
    }
})

// 第三个参数
navigator.geolocation.getCurrentPosition(...,...,{
    enableHighAccuracy: true,
    timeout: 1500
})

option配置项释义

• enableHighAccuracy 告诉浏览器是否启用高精度设备，所谓的高精度设备包含但不局限于前面所提到的GPS和WIFI，值为true时，浏览器会尝试启用这些设备，默认为true
• timeout 获取位置信息时超出设定的这个时长，将会触发错误，捕获错误的函数将被调用，并且错误码指向TIMEOUT。

2. watchPosition

watchPosition像一个追踪器与clearWatch成对。watchPosition与clearPosition有点像setInterval和clearInterval的工作方式。但是其只针对移动设备。

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