天天看点

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

  在访问位置信息前,浏览器都会询问用户是否共享其位置信息,以 Chrome 浏览器为例,如果您允许 Chrome 浏览器与网站共享您的位置,Chrome 浏览器会向 Google 位置服务发送本地网络信息,估计您所在的位置。然后,浏览器会与请求使用您位置的网站共享您的位置。

  HTML5 Geolocation API 使用非常简单,基本调用方式如下: 

  locationError为获取位置信息失败的回调函数,可以根据错误类型提示信息:

  locationSuccess为获取位置信息成功的回调函数,返回的数据中包含经纬度等信息,结合Google Map API 即可在地图中显示当前用户的位置信息,如下:

  经过测试,Chrome/Firefox/Safari/Opera四个浏览器获取到的位置信息都是一摸一样的,估计都是用的同一个位置服务,数据如下:

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

  而IE浏览器的和上面几款浏览器获取到的数据不一样,数据如下:

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

  位置服务用于估计您所在位置的本地网络信息包括:有关可见 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>

欢迎任何形式的转载,但请务必注明出处。

继续阅读