html5 Geolocation 地理定位

标签: html5 geolocation api | 发表时间:2013-12-26 22:41 | 作者:bingdian
出处:http://wlog.cn/

一、Geolocation 概述

Geolocation API 在网页中使用 geolocation 对象向javaScript 提供经度和纬度。利用 geolocation 对象,可以获取用户位置和跟踪用户位置的变化。

1.1 Geolocation API 获取地理位置的方式

设备使用下列数据源:

  • IP地址 - 任何地方可用,不精确
  • GPS - 很精确,定位需要时间长,耗电大,室内效果不好,需要额外设备
  • WiFi基站的mac地址 - 精确,可在室内使用,在无线接入点少的地方效果不好
  • GSM或CDMA基站 - 相当准确,可在室内使用,在基站较少的地区效果不好

为了使用更高的准确度,许多设备使用一个或更多的数据源组合。

1.2 地理位置获取流程:

  1. 用户打开需要获取地理位置的web应用。
  2. 应用通过Geolocation API 向浏览器请求地理位置,浏览器拦截请求,向用户请求授权。
  3. 假设用户允许,浏览器从设备查询相关信息,如IP地址、WIFI地址或GPS坐标。
  4. 浏览器将相关信息发送给信任的外部定位服务器,服务器返回具体的地理位置。

1.3 隐私

Geolocation API 规范提供了一套保护用户隐私的机制,必须先得到用户明确许可,才能获取用户的位置信息。

访问使用Geolocation API的页面应用时,会触发隐私保护机制,浏览器会询问用户是否共享位置信息。

用于收集位置数据的应用程序的开发人员应考虑关于隐私的以下准则:

因为位置数据属于敏感信息,所以开发人员应考虑遵循以下准则:

  • 仅在必要时请求位置信息,并且仅将位置信息用于其原计划用于的任务。
  • 如果用户没有授权存储这些数据,那么应用程序应该在相应任务完成后立即删除。
  • 如果要在服务器上存储位置数据,请务必确保位置数据不受到未经授权的访问,并允许用户更新和删除此信息。

1.4 应用场景

  • 更新本地信息
  • 显示用户周围的兴趣点
  • 车载导航系统

二、Geolocation 使用

Geolocation API的使用很简单,请求一个位置信息,如果用户同意,就返回位置信息。

2.1 检测浏览器是否支持Geolocation

在使用html5 Geolocation API时,应确保浏览器支持Geolocation API.

  if (navigator.geolocation) {
    console.log('Geolocation is supported.');
} else {
    console.log('geolocation is not supported in your broswer.');
}

2.2 getCurrentPosition 和 watchPosition

  • 使用 getCurrentPosition 方法获取当前的地理位置。
  • 使用 watchPosition 方法监视位置随时间变化的情况。

语法:

  // getCurrentPosition
navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options);

// watchPosition
navigator.geolocation.watchPosition(successCallback, errorCallback, options);

这两个方法都就使用的是异步回调的方式。它们有相同的参数:

  1. successCallback – 为浏览器成功获得位置信息后的回调函数。
  2. errorCallback – 用于位置信息获取失败时的回调函数。
  3. options – 配置参数,可以调整geolocation的数据收集方式
    • enableHighAccuracy - 指示浏览器获取高精度的位置,默认为false。当开启后,可能没有任何影响,也可能使浏览器花费更长的时间获取更精确的位置数据。
    • timeout - 最长有效期,在重复获取地理位置时,此参数指定多久再次获取位置。默认为0,表示浏览器需要立刻重新计算位置。
    • maximumAge - 表示程序能接受的被缓存位置的最大过期时间。接受一个数字作为参数,默认为0微秒。这就意味这默认每次获取位置都必需重新获取一个新位置。

2.3 clearWatch()

这个方法接受一个参数,需要清理监视位置变化的方法的id:watchID(这个参数由watchPosition方法返回)。

2.4 示例:

  var watchId = navigator.geolocation.watchPosition(function(position) { // succes callback
    var coords = position.coords;

    console.log(coords.latitude); // 纬度
    console.log(coords.longitude); // 经度
    console.log(coords.accuracy); // 准确度,由于geolocation的实现方式,呈现返回值时一定要检查返回值的准确度
    console.log(coords.altitude); // 海拔,以米为单位,如不支持altitude特性,返回null
    console.log(coords.altitudeAccuracy); // 海拔经度,以米为单位,如不支持altitude特性,返回null
    console.log(coords.heading); // 行进方向,相对正北
    console.log(coords.speed); // 行进速度,单位m/s
    console.log(timestamp); // 获取位置的时间

}, function(error) { // error callback
    console.log('获取位置信息失败。');
    console.log(error.code);
    // UNKNOWN_ERROR (error code 0) - 未知错误
    // PERMISSION_DENIED (error code 1) - 用户拒绝共享地理位置
    // POSITION_UNAVAILABLE (error code 2) - 无法获取当前位置
    // TIMEOUT (error code 3) - 在指定时间无法获取位置会触发此错误。
}, { // options
    enableHighAccuracy: true, 
    maximumAge: 30000, 
    timeout: 27000 
});

三、Geolocation Demo

扩展阅读

相关 [html5 geolocation 地理] 推荐:

html5 Geolocation 地理定位

- - On The Way
一、Geolocation 概述. Geolocation API 在网页中使用 geolocation 对象向javaScript 提供经度和纬度. 利用 geolocation 对象,可以获取用户位置和跟踪用户位置的变化. 1.1 Geolocation API 获取地理位置的方式. IP地址 - 任何地方可用,不精确.

跨浏览器获取 Geolocation

- - 幸福收藏夹
年末,这一年的工作都差不多搞完了. 因为下一年的目标是 HTML5 应用,所以在做一些小尝试. 距离 第一次在支付宝分享 HTML5,已经有一年半了,时间好快,就这么过去了. 前几天和同事聊到可能可以做个基于 LBS 的服务,回到家里就尝试了一下 HTML5 的 Geolocation API. 翻开一年前写的文档,很快就熟悉起来.

Geolocation和Web Sockets基于NodeJs的实战(2)

- - ria之家--RIA三部曲:jquery、ext、flex
上一篇教程明河讲解了一些NodeJs的知识点,这一篇教程将给大家讲解前端方面的知识点. Geolocation是html5中的主要内容,用于处理客户端的地理信息,特别在手持设备上有广泛的使用场景. Geolocation的简单的demo. (PS:demo中虽然实现了位置定位,但不能随着你的移动,坐标也发生变化,借助NodeJs的socket.io模块即可实现.

【转载】HTML5 地理位置定位的原理及应用

- - HTML5研究小组
地理位置是HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性东莞网站建设公司能够开发基于位置信息的应用. 下面 聚焦网络科技向大家介绍一下HTML5地理位置定位的基本原理及各个浏览器的数据精度情况. 在访问位置信息前,浏览器都会询问用户是否共享其位置信息,以 Chrome 浏览器为例,如果您允许 Chrome 浏览器与网站共享您的位置,Chrome 浏览器会向 Google 位置服务发送本地网络信息,估计您所在的位置.

HTML5开发:地理位置定位指南

- - HTML5研究小组
HTML5提供的最令人激动的特性之一. JavaScript代码,可以创建出能确定用户地理位置详细信息的Web应用,包括经纬度以及海拔等. 一些Web应用甚至能通过监控用户位置随时间的移动来提供导航功能,其中还综合了GoogleMaps API这样的地图系统. 和所有HTML5的功能一样,你还不能依赖浏览器提供支持.

HTML5 logo 发布

- Greyby - 酷壳 - CoolShell.cn
2011年1月19日,W3C发布了HTML5的log,打开W3C的页面,下在的图片印入眼前. 我的第一感觉,就像是看到了小时候看的八一电影制片产的电影. 这分明是号召全世界的无产Web程序员们团结起来,不畏艰难,不怕牺牲,一定要把HTML5的革命事业进行到底. 所以,请各位Web程序员不但在你们的HTML5的网页上加上下面的徽章(关于各个徽章的含义,请参看这里).

html5 canvas入门

- - Marshal's Blog
可以把canvas看做div,不过,它的长和宽不能通过css来定义,要使用标签属性:. 或者javascript对象属性设置:. 使用canvas,只有一种操作方式,使用javascript. 获得canvas对象的上下文对象,该对象是操作canvas的主要对象:. 使用canvas画最简单的线, 点击运行示例,结果看起来是这样:.

HTML5新特性

- - CSDN博客推荐文章
 通过fillStyle和strokeStyle 属性可以轻松的设置矩形的填充和线条. 颜色值使用方法和CSS 一样:十六进制数、rgb()、rgba() 和 hsla. 通过 fillRect可以绘制带填充的矩形. 使用 strokeRect 可以绘制只有边框没有填充的矩形. 如果想清除部分 canvas可以使用clearRect.

【转载】HTML5 Messaging

- - HTML5研究小组
HTML5 的Message API能够让HTML5页面之间传递消息,甚至这些页面可以不在同一样域名下. 为了让消息能从一个页面发送到另一个页面,主动发送消息的页面必须拥有另一个页面的窗口引用. 然后发送 页面针对接受页调用 postMessage() 方法. postMessage() 方法中 origin 参数的值必须与页面所在的iframe的域名相匹配.

Adobe、标准和HTML5 -HTML5 and CSS3 开发

- - HTML5研究小组
“[提供商之间的]最激烈的竞争将与 标准密切相关. 大部分聪明人的眼睛将紧盯着技术标准. 但在计算机行业,新标准既可能是无限财富的源泉,也可能导致企业帝国的毁灭. 尽管存在着如此多的风险,标准仍然点燃了无限激情”. —The Economist, 1993年2月23日. 在编写这段有关标准化的话时,计算领域的主要争议是Unix是否是一个可行的操作系统(以及是否为IBM、DEC和HP的更多专用操作系统带来了挑战),以及哪个视窗平台(SUN/AT&T还是IBM/DEC/HP)将成为标准.