HTML5的Geolocation地理位置定位API使用教程


Posted in HTML / CSS onMay 12, 2016

在手持设备如此普遍的今天,位置信息对于应用程序来讲是极其重要的,打车应用可以根据用户的位置信息呼叫附近的车辆,团购软件可以根据当前的位置推荐附近的影院和美食,地图应用可以根据用户的位置快速规划到目的地的路线,可以说位置信息对于移动应用是不可或缺的。
为了顺应这个潮流,HTML5为我们提供了Geolocation库,有了它我们就能够在Web应用中轻而易举地实现上述这些功能。那么今天我就为大家介绍一下这个库的使用。

基本用法 
首先,我们可以从浏览器的navigator对象中通过geolocation属性获取到一个Geolocation的实例,如下图所示:
HTML5的Geolocation地理位置定位API使用教程

图中我们可以看到,Geolocation类有三个常用的方法,他们分别是:

1.getCurrentPosition: 用于获取当前的位置信息
2.watchPosition: 用于在位置变化时实时监测位置信息
3.clearWatch: 取消正在运行的监测操作
我们先来看一下getCurrentPosition方法,下面是它的函数签名:

JavaScript Code复制内容到剪贴板
  1. navigator.geolocation.getCurrentPosition(success[, error[, options]]);  

第一个参数用于指定一个成功后的处理函数,第二参数用于指定一个错误处理函数,第三个用于给函数提供一些可选的配置项。现在我们就来调用这个函数:

JavaScript Code复制内容到剪贴板
  1. navigator.geolocation.getCurrentPosition(function(position) {   
  2.     //success handler code goes here   
  3.     console.log(position);   
  4. }, function(error) {   
  5.     //error handler code goes here   
  6.     console.log(error);   
  7. }, {//options   
  8.     enableHighAccuracy: true,   
  9.     timeout: 5000,   
  10.     maximumAge: 0   
  11. });  

一旦这段代码运行起来,浏览器窗口就会弹出一个确认框,请求用户进行位置定位的授权:
HTML5的Geolocation地理位置定位API使用教程

如果我们点击Allow允许该站点进行位置定位,该函数就开始从设备获取位置信息,并触发成功的回调函数,并将位置信息对象传入回调函数中,上面的代码中我们在控制台打印了position,控制台信息如下:
HTML5的Geolocation地理位置定位API使用教程

可以看到,position实际上是一个Geoposition对象的实例,其中包括coords和timestamp两个属性,后者是一个时间戳,记录获取到位置时的时间,coords里面包含了很多位置有关的信息:

accuracy: 位置的精确度范围,单位为米
altitude: 海拔高度,单位为米,如果设备不支持高度感应,则该属性为null
altitudeAccuracy: 海拔精确度范围,单位为米,如果设备不支持高度感应,则该属性为null
speed: 设备移动的速度,单位为米/秒,如果设备不能提供速度信息,该属性为null
heading: 当前移动的方向,以数字表示,单位为角度,以顺时针[0, 360)度表示偏离正北方的角度,0表示正北方向,90度表示正东方向,180度表示正南方向,270表示正西方向;需要注意的是,如果speed为0,则heading会是NaN,如果设备不能提供方向信息,则该属性为null
longitude: 经度信息
latitude: 纬度信息
我们在成功的回调函数中接收到这些信息,可以根据实际的设备和应用场景获取相应的信息,做进一步的操作。
回到刚才的确认框,如果我们点击了Block阻止该站点获取当前的位置信息,代码就会授权失败,相应地,失败的回调函数就会被触发,error错误对象也会被传入回调函数,我们的打印信息如下:
HTML5的Geolocation地理位置定位API使用教程

可以看到error参数是一个PositionError实例,包含一个错误码code和message,分别表示错误的类型和错误提示消息,其中错误码有以下几种:

1: PERMISSION_DENIED - 用户拒绝了授权请求,授权失败
2: POSITION_UNAVAILABLE - 因为一些内部错误,导致位置获取失败
3: TIMEOUT - 超时,超过了配置的超时时间后还未获取到位置信息
上面就是失败的回调函数,一般获取位置出现错误时,我们都要及时捕获,并做相应的处理操作,以获取好的用户体验,这一点很重要。
在上面的调用中,我们还传入了第三个参数,一个简单的对象,里面包含了几个配置信息,它们都是用来配置函数运行参数的:

enableHighAccuracy: 默认值为false,如果指定为true,则表示在设备支持的情况下,尽可能获取高精准度的数据,但这会在时间和电量方面存在一定的消耗
timeout: 用于指定一个超时时间,单位为毫秒,表示在超时后停止位置获取的操作,默认值是Infinity,表示直到获取到数据后才停止该操作的进行
maximumAge: 用于指定一个缓存位置信息的最长时间,在这个时间段内,获取位置时会从缓存中取,单位为毫秒,默认值为0,表示不使用缓存,每次都取新的数据
上面是关于getCurrentPosition方法的介绍,在某些场景下,例如路线导航应用,我们需要实时地获取最新位置,进而为用户规划最新的路线,这时,上面的方法已经不能很好的满足需求了,我们需要使用watchPosition方法:

JavaScript Code复制内容到剪贴板
  1. watchId = navigator.geolocation.watchPosition(success[, error[, options]]);  

watchPosition方法的使用方式和getCurrentPosition类似,不同的是,success函数会执行多次,一旦获取到最新的位置数据,success函数就会被触发,与之相似地,如果连续获取最新的数据失败时,error函数也会被执行多次。
大家或许会注意到,上面的函数签名中,会返回一个watchId,它标示着当前的watch操作,当我们位置跟踪任务完成后,可以使用clearWatch函数将这个watchId清除即可:

JavaScript Code复制内容到剪贴板
  1. navigator.geolocation.clearWatch(watchId);  

上面就是Geolocation的常用的三个API,日常开发中我们可根据实际情况选用合适的方法,进而获取用户的位置信息。
现在大部分浏览器都已支持Geolocation了,可是为了兼容低版本的浏览器,我们需要判断它的支持情况:

JavaScript Code复制内容到剪贴板
  1. if ('geolocation' in navigator) {   
  2.   // getting usr's position   
  3. else {   
  4.   // tips: your position is not available   
  5. }  

最后,我们用一个简单的例子来演示在开发中是如何使用Geolocation的:

JavaScript Code复制内容到剪贴板
  1. var API = {   
  2.     //get recommended data by current longitude and latitude   
  3.     getSurroundingRecommendations: function(longitude, latitude, callback) {   
  4.         //simulate data obtaining from server.   
  5.         setTimeout(function() {   
  6.             var data = [   
  7.                 {   
  8.                     //item   
  9.                 },   
  10.                 {   
  11.                     //item   
  12.                 }   
  13.             ];   
  14.             callback(data);   
  15.         }, 500);   
  16.     }   
  17. };   
  18.   
  19. document.addEventListener('DOMContentLoaded'function() {   
  20.     //detect if Geolocation is supported   
  21.     if (!'geolocation' in navigator) {   
  22.         console.log('Geolocation is not supported in your browser');   
  23.         return;   
  24.     }   
  25.   
  26.     var successHandler = function(position) {   
  27.         var coords = position.coords,   
  28.             longitude = coords.longitude,   
  29.             latitude = coords.latitude;   
  30.   
  31.         API.getSurroundingRecommendations(longitude, latitude, function(data) {   
  32.             console.log(data);   
  33.         });   
  34.     },   
  35.     errorHandler = function(error) {   
  36.         console.log(error.code, error.message);   
  37.     },   
  38.     options = {   
  39.         enableHighAccuracy: true,   
  40.         timeout: 5000,   
  41.         maximumAge: 0   
  42.     };   
  43.   
  44.     navigator.geolocation.getCurrentPosition(successHandler, errorHandler, options);   
  45.   
  46. }, false);   
  47.   

在上面的代码中,首先我们定义一个根据当前位置获取推荐数据的方法,然后在文档加载完成后,开始试图获取当前位置,并调研这个方法,获取模拟的数据,真是开发环境中,可能会进一步利用返回的数据做渲染UI等操作。

网络设备
位置服务用于估计您所在位置的本地网络信息包括:有关可见 WiFi 接入点的信息(包括信号强度)、有关您本地路由器的信息、您计算机的 IP 地址。位置服务的准确度和覆盖范围因位置不同而异。
总的来说,在PC的浏览器中 HTML5 的地理位置功能获取的位置精度不够高,如果借助这个 HTML5 特性做一个城市天气预报是绰绰有余,但如果是做一个地图应用,那误差还是太大了。不过,如果是移动设备上的 HTML5 应用,可以通过设置 enableHighAcuracy 参数为 true,调用设备的 GPS 定位来获取高精度的地理位置信息。

可选项
事实上,上述getCurrentPosition函数还支持第三个可选的参数,是一个 Option Object,一共有三个选项可以设定:

JavaScript Code复制内容到剪贴板
  1. var options = {     
  2.     enableHighAccuracy: false,     
  3.     timeout: 5000,     
  4.     maximumAge: 60000     
  5. }    

 
其中timeout是设定地理位置获取的超时时间(单位为毫秒,用户选择允许的时间不计算在内);而maximumAge表示允许设备从缓存中读取位置,缓存的过期时间,单位是毫秒,设为0来禁用缓存读取。如果返回的是缓存中的时间,会在timestamp中反映出来。
 

HTML / CSS 相关文章推荐
学做Bootstrap的第一个页面
May 15 HTML / CSS
css3 border旋转时的动画应用
Jan 22 HTML / CSS
非常震撼的纯CSS3人物行走动画
Feb 24 HTML / CSS
详解css3使用transform出现字体模糊的解决办法
Oct 16 HTML / CSS
利用html5 canvas动态画饼状图的示例代码
Apr 02 HTML / CSS
20佳惊艳的HTML5应用程序示例分享
May 03 HTML / CSS
html5中地理位置定位api接口开发应用小结
Jan 04 HTML / CSS
利用纯html5绘制出来的一款非常漂亮的时钟
Jan 04 HTML / CSS
用HTML5实现鼠标滚轮事件放大缩小图片的功能
Jun 25 HTML / CSS
canvas绘制树形结构可视图形的实现
Apr 03 HTML / CSS
Html5在手机端调用相机的方法实现
May 13 HTML / CSS
CSS3实现指纹特效代码
Mar 17 HTML / CSS
HTML5的video标签的浏览器兼容性增强方案分享
May 19 #HTML / CSS
HTML5中的postMessage API基本使用教程
May 20 #HTML / CSS
浅谈HTML5 defer和async的区别
Jun 07 #HTML / CSS
Html5上传图片 移动端、PC端通用代码
Jun 08 #HTML / CSS
你不知道的5个HTML5新功能
Jun 28 #HTML / CSS
HTML5里autofocus自动聚焦属性使用介绍
Jun 22 #HTML / CSS
HTML5 placeholder属性详解
Jun 22 #HTML / CSS
You might like
开发大型PHP项目的方法
2006/10/09 PHP
PHP字符过滤函数去除字符串最后一个逗号(rtrim)
2013/03/26 PHP
php下foreach提示Warning:Invalid argument supplied for foreach()的解决方法
2014/11/11 PHP
用php+ajax新建流程(请假、进货、出货等)
2017/06/11 PHP
mongodb和php的用法详解
2019/03/25 PHP
jQuery操作select的实例代码
2012/06/14 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
2013/07/09 Javascript
Javascript中的delete操作符详细介绍
2014/06/06 Javascript
Express作者TJ告别Node.js奔向Go
2014/07/14 Javascript
nodejs下打包模块archiver详解
2014/12/03 NodeJs
Javascript在IE和Firefox浏览器常见兼容性问题总结
2016/08/03 Javascript
解决wx.onMenuShareTimeline出现的问题
2016/08/16 Javascript
canvas绘制万花筒效果(代码分享)
2017/01/20 Javascript
微信小程序实现简单input正则表达式验证功能示例
2017/11/30 Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
2018/09/08 Javascript
vue中使用vue-pdf的方法详解
2020/09/05 Javascript
[52:39]完美世界DOTA2联赛PWL S3 CPG vs Forest 第一场 12.16
2020/12/17 DOTA
python文件和目录操作方法大全(含实例)
2014/03/12 Python
Python多线程爬虫简单示例
2016/03/04 Python
Python三级菜单的实例
2017/09/13 Python
python虚拟环境virtualenv的使用教程
2017/10/20 Python
Sanic框架异常处理与中间件操作实例分析
2018/07/16 Python
python os.listdir按文件存取时间顺序列出目录的实例
2018/10/21 Python
pyside+pyqt实现鼠标右键菜单功能
2020/12/08 Python
python基于property()函数定义属性
2020/01/22 Python
关于css中margin的值和垂直外边距重叠问题
2020/10/27 HTML / CSS
canvas仿写贝塞尔曲线的示例代码
2017/12/29 HTML / CSS
Nike西班牙官方网站:Nike.com (ES)
2017/10/30 全球购物
英国家喻户晓的家居商店:The Range
2019/03/25 全球购物
英国领先的在线高尔夫商店:Gamola Golf
2019/11/16 全球购物
产品销售员岗位职责
2013/12/18 职场文书
小班重阳节活动方案
2014/02/08 职场文书
《雪地里的小画家》教学反思
2014/02/22 职场文书
阳光体育活动实施方案
2014/05/25 职场文书
小学学校评估方案
2014/06/08 职场文书
运动会新闻稿
2015/07/17 职场文书