HTML5 Geolocation实用性小调查

浏览数：32 / 时间：2015年06月09日

原文及代码请戳

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坐标的算法。