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

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

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(locationSuccess, locationError,{
        // 指示浏览器获取高精度的位置,默认为false
        enableHighAccuracy: true,
        // 指定获取地理位置的超时时间,默认不限时,单位为毫秒
        timeout: 5000,
        // 最长有效期,在重复获取地理位置时,此参数指定多久再次获取位置。
        maximumAge: 3000
    });
}else{
    alert("Your browser does not support Geolocation!");
}

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

locationError: function(error){
    switch(error.code) {
        case error.TIMEOUT:
            showError("A timeout occured! Please try again!");
            break;
        case error.POSITION_UNAVAILABLE:
            showError('We can\'t detect your location. Sorry!');
            break;
        case error.PERMISSION_DENIED:
            showError('Please allow geolocation access for this to work.');
            break;
        case error.UNKNOWN_ERROR:
            showError('An unknown error occured!');
            break;
    }
}

HTML5 地理位置定位(HTML5 Geolocation)原理及应用的更多相关文章

  1. [Javascript] HTML5 地理位置定位(HTML5 Geolocation)原理及应用

    地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个 ...

  2. HTML5 地理位置定位API(3)

    HTML5 地理位置定位实例 这篇文章主要为大家介绍了HTML5地理定位的方法,实例讲述了html5获取坐标完整实现过程, 并对比不同浏览器运行效果给出参考结果,需要的朋友可以参考下 本文实例讲述了h ...

  3. HTML5 地理位置定位API(1)

    地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个 ...

  4. 使用HTML5地理位置定位到城市的方法及注意事项

    介绍 本文将简述一下如何通过HTML5和百度地图开放平台提供的API来实现对浏览器的定位.实现效果为显示出用户所在的省市,即: XXX省 XXX市. 实现思路 利用HTML5 提供的API获取到用户的 ...

  5. html5地理位置定位功能小析

    Geolocationd 基本原理1.GPS    GPS基本原理是测量出已知位置的卫星到用户接收机之间的距离,然后综合多颗卫星的数据就可知道接收机的具体位置.适用于具备GPS功能的设备(1)优点:在 ...

  6. HTML5 地理位置定位API(5)

    HTML5 Geolocation API (地理位置应用程序接口) 目前PC浏览器支持情况: Firefox 3.5+Chrome 5.0+Safari 5.0+Opera 10.60+Intern ...

  7. HTML5 地理位置定位API(2)

    HTML5 Geolocation API (地理位置应用程序接口) 目前PC浏览器支持情况: Firefox 3.5+Chrome 5.0+Safari 5.0+Opera 10.60+Intern ...

  8. HTML5 地理位置定位API(4)

    地理定位(geolocation)是最令人兴奋,而且得到了广泛支持的一个新API.通过这套API, JavaScript代码能够访问到用户的 当前位置信息.当然,访问之前必须得到用户的明确许可,即同意 ...

  9. HTML5浏览器定位navigator.geolocation.getCurrentPosition

    <!DOCTYPE html> <html> <body> <p id="demo">点击这个按钮,获得您的坐标:</p> ...

随机推荐

  1. wordpress 打开卡在1.gravatar.com

    grevatar.com打不开,涉及到加载头像的地方都会变慢. 可以使用https的头像链接代替http链接 官方Gravatar头像调用ssl头像链接 进入wordpress后台->外观-&g ...

  2. 两台装有Ubuntu系统的服务器搭建VPN(一台为本地服务器,另一台为云服务器)

    我们搭建VPN采用的是openvpn,搭建过程总体需要经过三大步骤:   1.openvpn的安装与配置    2.端口转发    3.系统重启iptables规则自动生效  注意:以下所有名令在ro ...

  3. 多线程的学习与python实现

    学习了进程与线程,现对自己的学习进行记录. 目录: 一.进程与线程的概念,以及联系与区别 二.多线程 三.python中多线程的应用 四.python实例 五.参考文献 一.进程与线程的概念.以及联系 ...

  4. 高斯过程(gaussian process)

    Definition 1. A Gaussian Process is a collection of random variables, any finite number of which hav ...

  5. rpc使用JUnit模块测试设计的方法及常见问题

    RPC:Remote Procedure Call 远程过程调用 Wikipedia:http://en.wikipedia.org/wiki/Remote_Procedure_Call 百度百科:h ...

  6. 如何判断js中的数据类型?

    js六大数据类型:number.string.object.Boolean.null.undefined string: 由单引号或双引号来说明,如"string" number: ...

  7. linux安装jdk(以centos安装jdk1.7为例)

    1准备工作: 1 虚拟机一台vmware12,安装64位centos 2 oracle官网下载jdk1.7-linux-x64.rpm 3 winscp将jdk传送到linux上面 2开始安装: 1 ...

  8. JavaScript测试题

    您的回答: 1.我们可以在下列哪个 HTML 元素中放置 Javascript 代码? 您的回答:<script> 2.写 "Hello World" 的正确 Java ...

  9. PCB Layout高速电路设计小知识点

    1.单位:1mil = 0.0254mm 2.default线宽及线距(综合考虑高速电路性能及PCB板厂制程能力):6mil 3.差分走线特征阻抗:100ohm 4.3W原则,即线间距采用3倍线宽,多 ...

  10. php实现函数重载

    java..net等强类型预言中都有方法重载,但是PHP是弱类型语言,不能确定参数的类型, 而且如果php定义的方法接收一个参数,调用的时候传入多个也不会有问题,所以不能进行重载. 但是我们可以通过p ...