H5新特性之geolocation地理定位对象-轻松搞定定位应用

一、地理定位 geolocation 介绍

geolocation 是window.navigator里面的一个子对象，该对象有3个方法1个对象。

使用场景：

1. 基于位置的服务（LBS）

2. 社交APP ，微信，微博 一次

3. 导航、地图 不断获取

4. 生活服务类，外卖、订票 一次

5. 健康类应用，比如跑步类app 不断获取

以上定位可以分为两类：获取一次定位和不断获取定位

二、定位原理

1. IP地址 PC端

2. WiFi地址 PC端 定位不准确

3. GPS 全球定位系统 国内有北斗，需要便携设备有定位芯片

4. 基站 比如国内3大运营商

三、只获取一次定位的方法-getCurrentPosition

//语法：
navigator.geolocation.getCurrentPosition(获取成功的回调函数,获取失败的回调函数,配置对象);
参数说明：
1. 第一个参数是一个函数，该函数在获取位置成功时会执行
2. 第二个参数也是一个函数，可选，在获取失败时会执行
3. 第三个参数是一个配置对象，可选，用来配置定位定位的细节
//比如：
navigator.geolocation.getCurrentPosition(function(pos){
    //定位成功时会执行的代码
    console.log(pos)
},function(err){
    //定位失败时会执行的代码
    console.log(err);
},{});

四、不断获取定位的方法-watchPosition

1. watchPosition

​ 该方法用法同一次定位的一样，只是像定时器那样会自动隔一段时间就会重新获取一次用户位置。

​ 该方法主要适用于手机。

var timer=setInterval();
//语法
var p=navigator.geolocation.watchPosition(获取成功的回调函数,获取失败的回调函数,配置对象);
//参数说明：
1. 第一个参数是一个函数，该函数在获取位置成功时会执行
2. 第二个参数也是一个函数，可选，在获取失败时会执行
3. 第三个参数是一个配置对象，可选，用来配置定位定位的细节
//比如：
navigator.geolocation.watchPosition(function(pos){
    //定位成功时会执行的代码
    console.log(pos)
},function(err){
    //定位失败时会执行的代码
    console.log(err);
},{});

2. 清空不断获取位置的方法

   watchposition可以被随时通过另外一个方法清空，就像清空定时器那样。用法也一样。

   
   //清空定时器
   clearInterval(标识符)
   //清空定位：
   navigator.geolocation.clearWatch(标识符);
   //比如
   navigator.geolocation.clearWatch(p);

五、在移动端获取H5的定位信息一般会失败，失败原因

1. 第一种情况
   浏览器不支持原生定位接口，如IE较低版本的浏览器，message字段包含Browser not Support html5 geolocation信息。

2. 第二种情况
   用户禁用了定位权限，需要用户开启定位权限，message字段包含Geolocation permission denied。

3. 第三种情况
   浏览器禁止了非安全域的定位请求，比如Chrome、IOS10已经陆续禁止，需要升级站点到HTTPS，message字段包含Geolocation permission denied信息。注意:Chrome不会禁止localhost域名HTTP协议下的定位。

4. 第四种情况
   浏览器定位超时，包括原生的超时，可以适当增加超时属性的设定值以减少这一现象。某个别浏览器本身对定位接口的友好程度较弱，也会超时返回失败，message字段包含Geolocation time out信息。

5. 第五种情况（也就是可能需要翻墙）
   Chrome、Firefox以及一些套壳浏览器接入的定位服务在国外，有较大的限制，也会造成定位失败，且失败率较高。

如何解决：

1. 转为百度API即可（也就是使用百度地图API，见下面的扩展技能）
2. 如果是PC端，尝试开启win10的定位服务，到设置的定位服务中允许Google浏览器或IE edge浏览器使用定位。（这样chrome可能还是不行，但是edge可以了）
3. 需要代理访问（VPN）

五、扩展技能-借助百度地图api完成地理定位开发

通过调用百度地图的方法，实现地图场景应用。

https://lbsyun.baidu.com/

然后在

https://lbsyun.baidu.com/jsdemo.htm 这找具体的使用场景，改对应的坐标和信息即可。

不需要读懂百度地图代码，只需要知道怎么用。

JS文档页：
http://lbsyun.baidu.com/index.php?title=jspopular

开发者秘钥API申请入口：
http://lbsyun.baidu.com/apiconsole/key?application=key

通过百度地图接口根据当前IP获取地址：
https://api.map.baidu.com/location/ip?ak=YhgdX9V4DTAIepL8XHcMFkVYEvd4zzkv&ip=36.158.146.76&coor=bd0911

通过百度地图接口获取当前经纬度返回所在地：
https://api.map.baidu.com/api?v=2.0&ak=YhgdX9V4DTAIepL8XHcMFkVYEvd4zzkv

示例代码：

var geolocation = new BMap.Geolocation();
// console.dir(geolocation)
geolocation.getCurrentPosition(function (res) {
    if (this.getStatus() == BMAP_STATUS_SUCCESS) {
        console.log(res);
    }
}, {enableHighAccuracy: true,timeout:1500});

通过搜狐接口获取当前IP地址：
https://pv.sohu.com/cityjson

相关单词

1. geology
2. geolocation 地理定位
3. getCurrentPosition 只定位一次
4. watchPosition 定位多次

此资源下载链接已被无情的隐藏，请输入验证码解锁：

验证码

确定

请关注本站公众号回复“验证码”，获取验证码。

在微信里搜索“WEB前端全栈圈”或者“imqdcn”或者微信扫描二维码都可以关注微信公众号