HTML5 Geolocation实用性小调查

原文及代码请戳

http://appnext.mybluemix.net/Tracker.html

详细说明

本文中的代码来源于developWorkds上的这篇文章。不过,如果你仔细阅读过原文中的代码,就会发现其中有2处错误。一处是致命的错误导致距离计算结果变成NaN,另一处使得计算结果显示不正确。不过这两处已在此处的代码中修复了,有兴趣的同学可以比较一下源代码看看错误到底出在哪里。另外,本页面中的代码显示了Position对象中,HTML5定义的所有值,并且加入了一个计时器计算显示定位所耗时间。另外,在调用navigator.geolocation.watchPosition方法时,指定了高精度定位参数enableHighAccuracy:true

我分别尝试了使用PC机上的火狐浏览器(非中国版)、谷歌浏览器(Chrome)、IE浏览器;MAC机上的Safari和谷歌浏览器(Chrome);Android手机自带浏览器(HTC和小米)和iPhone自带浏览器打开这个页面,结果不同平台上的不同浏览器显示结果都出现了一些意想不到的情况,具体如下表所示(所有平台上都已允许本页面获得定位为前提)。

在不同平台不同操作系统下的区别
平台 操作系统 浏览器 说明
PC Windows 7 Internet Explorer 成功定位。

海拔高度/精度、朝向、速度显示为null(?待确定)。

PC Windows 7 谷歌浏览器 无法定位。

一段时间后显示:


浏览器无法获取您的位置信息:Network location provider at ‘https://www.googleapis.com/’ : No response received.

PC Windows 7 火狐浏览器(非中国版) 无法定位。

一段时间后显示未知错误。

MAC OS X Yosemite Safari 成功定位。

海拔高度/精度、朝向、速度显示为null,更新timestamp显示为30年前(Stackoverflow上有人问过同样的问题,戳此处看原帖)。

MAC OS X Yosemite 谷歌浏览器 与Windows 7中的谷歌浏览器相同,无法定位。
Android手机(HTC One M7) Android 5.0.2
(HTC Sense 6,
HTC官方ROM非Android原生)
系统自带浏览器 成功定位。

待GPS定位成功后除海拔精度为null外都有数值。

Android手机(HTC One M7) Android 5.0.2
(HTC Sense 6,
HTC官方ROM非Android原生)
谷歌浏览器 成功定位。

待GPS定位成功后除海拔精度为null外都有数值。

Android平板(小米平板) Android 4.4.4
(MIUI 5开发版)
系统自带浏览器 成功定位。

海拔高度/精度、朝向、速度显示为null。

定位耗时较长,平均10秒左右(10000毫秒)。

Android平板(小米平板) Android 4.4.4
(MIUI 5开发版)
谷歌浏览器 无法定位。

长时间等待后无错误显示。

iPhone iOS 8 系统自带浏览器(Safari) 定位成功。

待GPS定位成功后除海拔精度为null外都有数值(?待确定,没本人没有iPhone,求支援)。

iPad iOS 8 系统自带浏览器(Safari) 待测定,求一台iPad支援。

关于谷歌火狐等浏览器无法定位的原因

某些平台上谷歌、火狐等浏览器无法定位的原因是因为,平台未提供诸如GPS的定位功能,进而导致浏览器使用google的api来定位,而众所周知google在国内无法访问,所以导致定位失败。知乎上有文说明得很详细,请看这篇提问中的Jesion Wang的回答。如果在谷歌/火狐浏览器打开此页面时,使用TCP监控手段查看系统中的连接,可以发现浏览器正在尝试连接如xxxx.1e100.net,这也佐证了知乎中网友的回答。

一个比较简单地解决方案是使用第三方的定位服务,譬如百度地图API的浏览器定位功能。好处是实现比较简单,坏处则是定位不精确,并且无法直接获得原始GPS数据。如果使用百度地图API,获得的结果是加密后的百度坐标系坐标,而通过HTML5 Geolaction获得的坐标则是原始的GPS WGS-84系坐标。如果你不满意,这里有个百度系坐标换算成GPS坐标的算法

关于各种坐标系

由于各种原因,GPS设备采集的真实GPS坐标在国内是无法正常使用的,需要经过一个转换才能使用。这是虽然是一个公开的“秘密”,由于我们不谈政治,有兴趣的童鞋请自行向度娘询问以下几个关键字:火星坐标系统、GCJ-02、国家保密插件、GPS纠偏、wgtochina_lb。

经过测试和验证,上文(详细说明)中凡是使用HTML5 Geolocation的方法取得的坐标均为地球坐标系的坐标,也就是说如果你想把通过HTML5 Geolocation方法取得的坐标显示在第三方的地图上,需要经过特别的转换才能正确使用。拿百度地图API来说的话,可以参考这个示例

时间: 2024-10-20 11:40:48

HTML5 Geolocation实用性小调查的相关文章

HTML5 地理位置定位(HTML5 Geolocation)原理及应用

地理位置(Geolocation)是 HTML5 的重要特性之中的一个,提供了确定用户位置的功能,借助这个特性可以开发基于位置信息的应用. 今天这篇文章向大家介绍一下HTML5 地理位置定位的基本原理及各个浏览器的数据精度情况. 在訪问位置信息前,浏览器都会询问用户是否共享其位置信息,以 Chrome 浏览器为例,假设您同意 Chrome 浏览器与站点共享您的位置,Chrome 浏览器会向 Google 位置服务发送本地网络信息,预计您所在的位置. 然后,浏览器会与请求使用您位置的站点共享您的位

HTML5 Geolocation API精确性[转载]

大家都知道,HTML5 Geolocation 可以使用 IP 地址.基于 Web 的数据库.无线网络连接和三角测量或 GPS 技术来确定经度和纬度. 问题: 在一个基于地理位置服务的个人业余项目(小伙伴在哪儿)中,发现用PC获取的地理位置与手机端获取的地理信息存在微小的差距,PC端会经常出现获取不到地理位置的情况,PC端和手机端的Geolocation是否有什么底层实现方面的差别呢,HTML5又是根据什么原则来确定应该采用何种方式来确定经度和纬度信息呢? 带着这个问题,作者查阅了一些资料,得出

html5 Geolocation(地理位置定位)学习

1.html5 Geolocation html5 Geolocation API 使用很简单,请求一个位置信息,如果用户同意,浏览器会返回一个位置信息,该位置是通过用户的底层设备(手机,电脑) 提供给浏览器.位置信息一般包括经度和纬度信息! 经度和纬度坐标信息一般由两种方式表示 a.十进制表示:39.17222 b.DMS角度格式表示:39°10'20" 2.位置从哪里来 html5 Geolocation API不指定设备使用哪种底层技术来定位应用程序的用户,相反,它只是用于检索位置信息的A

HTML5 Geolocation 构建基于地理位置的 Web 应用

HTML5 中的新功能 HTML5 是最新一代的 HTML 规范,是 W3C 与 WHATWG 合作的结果,目前仍外于开发中.自从上一代 HTML4,Web 世界已经发生了巨大的变化,HTML5 的到来更大地促进了 Web 的发展,HTML5 提供了很多新的功能,主要有: 新的 HTML 元素,例如 section, nav, header, footer, article 等 用于绘画的 Canvas 元素 用于多媒体播放的 video 和 audio 元素 用于定位的 Geolocation

HTML5 Geolocation位置信息定位总结

现在定位功能很常用,所以抽出一些时间将这个功能的知识总结一下作为知识梳理的依据.HTML5 Geolocation的定位用法很简单,首先请求位置信息,用户同意,则返回位置信息.HTML5 Geolocation仅仅是用来检索定位信息的API,至于底层是如何定位的他也不知道,他就相当于一个传信的,你说是1,ok,那我就给用户传个1,仅此而已. 1).位置信息来源的分类和特点 1.IP定位 优点:任何地方都可以. 在服务器端处理. 缺点:不准确,只能精确到市级. 2.GPS定位 优点:比较准确. 缺

html5 geolocation API

清单 1. 检查浏览器支持性if (navigator.geolocation) 清单 2. 单次定位请求 API void getCurrentPosition(updateLocation, optional handleLocationError, optional options); 清单 3. updateLocation() 函数使用示例updateLocation() 函数是getCurrentPosition的必选参数,也是浏览器指明位置数据可用时应调用的函数.获取位置操作可能需

HTML5 Geolocation(地理定位)用于定位用户的位置。

定位用户的位置 HTML5 Geolocation API 用于获得用户的地理位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的. 浏览器支持 Internet Explorer 9.Firefox.Chrome.Safari 以及 Opera 支持地理定位. 注释:对于拥有 GPS 的设备,比如 iPhone,地理定位更加精确. HTML5 - 使用地理定位 请使用 getCurrentPosition() 方法来获得用户的位置. 下例是一个简单的地理定位实例,可返

HTML5 GeoLocation 地理定位

window.navigator 对象包含有关访问者浏览器的信息,window.navigator 对象在编写时可不使用 window 这个前缀. 浏览器支持 Internet Explorer 9.Firefox.Chrome.Safari 以及 Opera 支持地理定位. 注释:对于拥有 GPS 的设备,比如 iPhone,地理定位更加精确 HTML5 地理定位 html5为window.navigator提供了geolocation属性,用于获取基于浏览器的当前用户地理位置. window

Html5 Geolocation获取地理位置信息(转)

Html5中提供了地理位置信息的API,通过浏览器来获取用户当前位置.基于此特性可以开发基于位置的服务应用.在获取地理位置信息前,首先浏览器都会向用户询问是否愿意共享其位置信息,待用户同意后才能使用. Html5获取地理位置信息是通过Geolocation API提供,使用其getCurrentPosition方法,此方法中有三个参数,分别是成功获取到地理位置信息时所执行的回调函数,失败时所执行的回调函数和可选属性配置项. 如下Demo演示了通过Geolocation获取地理位置信息,并在百度地