在访问位置信息前,浏览器都会询问用户是否共享其位置信息,以 Chrome 浏览器为例,如果您允许 Chrome 浏览器与网站共享您的位置,Chrome 浏览器会向 Google 位置服务发送本地网络信息,估计您所在的位置。然后,浏览器会与请求使用您位置的网站共享您的位置。
HTML5 Geolocation API 使用非常简单,基本调用方式如下:
locationError为获取位置信息失败的回调函数,可以根据错误类型提示信息:
locationSuccess为获取位置信息成功的回调函数,返回的数据中包含经纬度等信息,结合Google Map API 即可在地图中显示当前用户的位置信息,如下:
经过测试,Chrome/Firefox/Safari/Opera四个浏览器获取到的位置信息都是一摸一样的,估计都是用的同一个位置服务,数据如下:
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiInBnauMTMzMWO1ITZ4YmZmZDNxUzNiVTZiJmM5IDOwUmY4UTMfdWbp9CXt92Yu4GZjlGbh5SZslmZxl3Lc9CX6MHc0RHaiojIsJye.jpg)
而IE浏览器的和上面几款浏览器获取到的数据不一样,数据如下:
位置服务用于估计您所在位置的本地网络信息包括:有关可见 WiFi 接入点的信息(包括信号强度)、有关您本地路由器的信息、您计算机的 IP 地址。位置服务的准确度和覆盖范围因位置不同而异。
<a href="http://www.cnblogs.com/lhb25/archive/2012/05/09/exciting-online-web-games-built-in-html5.html" target="_blank">35款优秀的基于 HTML5 的网页游戏</a>
<a href="http://www.cnblogs.com/lhb25/archive/2012/05/22/35-fresh-inspirational-html5-portfolio-websites.html" target="_blank">精美绝伦的 HTML5 个人作品集网站</a>
<a href="http://www.cnblogs.com/lhb25/archive/2012/05/29/impressive-html5-canvas-experiments.html" target="_blank">20个惊艳的 HTML5 Canvas 应用试验</a>
<a href="http://www.cnblogs.com/lhb25/archive/2011/06/27/7-great-html-5-video-player-scripts.html" target="_blank">推荐7款非常棒的 HTML5 视频播放器</a>
<a href="http://www.cnblogs.com/lhb25/category/146076.html" target="_blank">12个很炫的 HTML5 和 CSS3 应用示例</a>
欢迎任何形式的转载,但请务必注明出处。