Geolocation API

HTML5 Geolocation API,它允许用户在 web 应用程序中共享他们的的位置,使其能够享受位置感知服务。
HTML5 Geolocation 位置信息主要有:纬度,经度和其他特性,比如准确度、时间戳等等。
获取位置信息的途径有:GPS、Wi-Fi 和蜂窝站点等。
Geolocation API 中有两种类型的定位请求函数:单次定位请求和重复性的位置更新请求。
应用场景:共享位置,计算行走(跑步)路程,GPS 导航的社交网络应用等等。

一、位置信息
HTML5 Geolocation API 的使用方法相当简单。请求一个位置信息,如果用户同意,浏览器就会返回位置信息,该位置信息是通过支持 HTML5 地理定位功能的底层设备(如 PC 或手机)提供给浏览器的。位置信息由纬度、经度坐标和一些其他元数据组成。有这些位置信息就可以构建位置感知类应用程序了。
(1)纬度和经度坐标
经纬度坐标可以用两种方式表示:
A. 十进制格式(e.g: 39.172 22)
B. DMS (Degree Minute Second,角度)格式(e.g: 61°26'24')
HTML5 Geolocation API 返回坐标的格式是十进制格式。另外,HTML5 Geolocation 还提供位置坐标的准确度。它还可能会提供其他一些元数据,具体情况取决于浏览器所在的硬件设备,这些元数据包括海拔、海拔准确度、行驶方向和速度等。这些元数据不存在则返回 null。
(2)位置信息来源
HTML5 Geolocation API 不指定设备使用哪种底层技术来定位应用程序的用户,相反,它只是用于检索位置信息的 API ,而且通过该 API 检索到的数据只具有某种程度的准确性。它并不能保证返回的时机位置是精确的。
设备可以使用下列数据源:

  • IP 地址
  • 三维坐标:GPS(Global Positioning System,全球定位系统);从 RFID、Wi-Fi 和蓝牙到 Wi-Fi 的 MAC 地址;GSM 或 CDMA 手机的 ID.
  • 用户自定义数据
    为了保证更高的准确度,许多设备使用 1 个或多个数据源的组合。

二、数据源优缺点
(1)IP 地址地理定位数据
基于 IP 地址的地理定位的实现方式是:自动查找用户的 IP 地址,然后检索其注册的物理地址。因此,如果用户的 IP 地址是 ISP( Internet Service Provider,互联网服务提供商 )的,其位置往往就由服务供应商的物理地址决定,该地址可能距离用户数千米。所以,它返回的位置信息通常不靠谱。。。。。
基于 IP 地址的地理位置数据的优缺点:

优点 缺点
任何地方都可用;在服务器端处理 不精确(经常出错,一般精确到城市级);运算代价大

(2)GPS 地理定位数据
只要看得到天空的地方,GPS 就可以提供非常精确的定位结果。GPS 定位是通过收集运行在地球周围的多个 GPS 卫星的信号实现的。但是,它的定位时间比较长,因此它不适合需要快速响应的应用程序。
基于 GPS 地理定位数据的优缺点:

优点 缺点
很精确 定位时间长,用户耗电量大;室内效果不好;需要额外硬件设备

(3)Wi-Fi 的地理定位数据
基于 Wi-Fi 的地理定位信息是通过三角距离计算得出的,这个三角距离指的是用户当前位置到已知的多个 Wi-Fi 接入点(几乎都在城市里)的距离。不同于 GPS ,Wi-Fi 在室内也非常准确。
基于 Wi-Fi 的地理定位数据的优缺点:

优点 缺点
精确;可在室内使用;可以简单、快捷定位 在乡村这些无线接入点较少的地区效果不好

(4)手机地理定位数据
基于手机的地理定位信息是通过用户到一些基站的三角距离确定的。这种方法可提供相当准确的位置结果。它通常同基于 Wi-Fi 和基于 GPS 的地理定位信息结合使用。
基于手机的地理定位数据的优缺点:

优点 缺点
相当准确;可在室内使用;可以简单、快捷定位 需要能够访问手机或其 modem 的设备;在基站较少的偏远地区效果不好

(5)用户自定义的地理定位数据
应用程序可能允许用户输入他们的地址、邮政编码和其他一些详细信息。应用程序可以利用这些信息来提供位置感知服务。
用户自定义的地理定位数据的优缺点:

优点 缺点
用户可以获得比程序定位服务更为准确的位置数据;允许地理定位服务的结果作为备用位置信息;用户自行输入可能比自动检测更快 可能很不准确,特别是当用户位置变更后

三、HTML5 Geolocation 的浏览器支持情况
可以访问 http://caniuse.com/

Paste_Image.png

如果必须支持早期版本的浏览器,最好在调用 API 之前,检查浏览器是否支持 Geolocation。

四、隐私
HTML5 Geolocation 规范提供了一套保护用户信息隐私的机制。除非得到用户明确许可,否则不可获取位置信息。
HTML5 地理定位浏览器和设备的隐私架构说明:
(1)用户从浏览器中打开位置感知应用程序;
(2)应用程序 web 页面加载,然后通过 Geolocation 函数调用请求位置坐标。浏览器拦截这一请求,然后请求用户授权。这里假设用户同意。
(3)浏览器从其宿主设备中检索坐标信息。例如:IP 地址、Wi-Fi 或 GPS 坐标,这是浏览器的内部功能。
(4)浏览器将坐标发送给受信任的外部定位服务。它返回一个详细位置信息,并将该位置信息发回给 HTML5 Geolocation 的应用程序。
注意:应用程序不能直接访问设备,它只能请求浏览器来代表它访问设备。

执行 HTML5 Geolocation 代码时会触发这一机制。如果仅仅是添加 HTML5 Geolocation 代码,而不被任何方法调用,则不会触发隐私保护机制。只要所添加的 HTML5 Geolocation 代码被执行,浏览器就会提示用户应用程序要共享他们的位置。

在收集地理定位数据时,应用程序应该着重提示用户以下内容:
会收集位置数据;(can or can’t)
为什么收集位置数据;(why)
位置数据将保存多久;(save)
如何保证数据安全;(safe)
位置数据怎样共享,和谁共享(同意的话);(share)
用户怎样检查和更新他们的位置数据;(examine and update)

五、HTML5 Geolocation API 的使用
上面说过了,位置请求有两种,单次请求和重复性的位置更新请求。
单次请求(一次更新):
<code>navigator.geolocation.getCurrentPosition(updateLocation,handleLocationError,option)</code>
重复更新:
<code>navigator.geolocation.watchPosition(updateLocation,handleLocationError)</code>
关闭更新:
<code>navigator.geolocation.clearWatch(watchId)</code>

函数说明:
updateLocation()
只要浏览器具备访问位置信息的条件,就会调用 updateLocation() 函数,该函数只接受一个参数:位置对象。这个对象包含坐标(coords 特性)和一个获取位置数据时的时间戳。在实际开发中不一定需要时间戳,重要的数据都包含在了 coords 特性中。

handleLocationError()
因为位置计算服务很可能出错,所以对于 HTML5 Geolocation 应用程序来说错误处理非常重要。很幸运,Geolocation API 定义了所有需要处理的错误情况的错误编号。编号错误设置在错误对象(error)中,错误对象的 code 特性传递给错误处理程序。
(1)PERMISSION(错误编号为 1)-----用户选择拒绝浏览器获得其位置信息;
(2)POSITION_UNAVAILABLE(错误编号为 2)-----尝试获取用户位置数据,但失败了;
(3)TIMEOUT(错误编号为 3 -----设置了可选的 timeout 值。尝试确定用户位置的过程超时。

option
如果要同时处理正常情况和错误情况,就应该把注意力集中到三个可选参数(enableHighAccuracy、timeout 和 maximumAge),将这三个可选参数传递给 HTML5 Geolocation 服务以调整数据收集方式。
注意:这三个参数可以使用 JSON 对象传递,这样更便于添加到 HTML5 Geolocation 请求调用中。
(1)enableHighAccuracy:如果启用该参数,则通知浏览器启用 HTML5 Geolocation 服务的高精确度模式。参数的默认值为 false。如果启用此参数,可能没有任何差别,也可能会导致机器花费更多的时间和资源来确定位置,所以应谨慎使用。
(2)timeout:单位为 ms,告诉浏览器计算当前位置所允许的最长时间。如果在这个时间段内未完成计算,就会调用错误处理程序。其默认值为 Infinity,即无穷大或无限制。
(3)maximumAge: 这个值表示浏览器重新计算位置的时间间隔(即表示的是频率)。单位为 ms,此值默认为零,这意味着浏览器每次请求时必须立即重新计算位置。
注意:地理定位 API 不允许指定浏览器多长时间重新计算一次位置。这是完全由浏览器的实现所决定的。我们能做的只是告诉浏览器 maximumAge 的返回值是什么。实际频率是一个无法控制的细节。

watchId
它是 watchPosition() 函数的返回值。watchId 表示一个唯一的监视请求以便将来取消监视。
示例:
<code>
var watchId=navigator.geolocation.watchPosition(updateLocation,handleLocationError);
navigator.geolocation.clearWatch(watchId);</code>

六、完整示例
https://lindazhang102.github.io/HTML5/odometer.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,319评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,801评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,567评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,156评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,019评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,090评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,500评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,192评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,474评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,566评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,338评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,212评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,572评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,890评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,169评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,478评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,661评论 2 335

推荐阅读更多精彩内容