地理位置(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. Android Studio打开时提示ADB错误的问题

    如图所示,ADB连接错误,解决办法很简单:打开cmd,定位到sdk文件夹下的platform-tools,然后执行adb kill-server回车:再执行adb start-server即可

  2. JavaScript中style, currentStyle和 getComputedStyle的异同

    今天在做项目的时候,习惯性的用到了element.style.width,然而浏览器却报错,错误提示是style is undefined,这是我才意识到,内联样式表和外联样式表在js应用中也有很大的 ...

  3. c语言操作一维数组-3

    C语言选择题#includemain(){double a[15],k;k=fun(a);} 则以下选项中错误的fun函数首部是 ( D)A.double fun(double a[15]) B.do ...

  4. 软件分析(Mobile Apps )--百词斩

    1) 此类软件是什么时候开始出现的, 这些软件是怎么说服你(陌生人)成为他们的用户的? 他们的目标都是盈利么? 他们的目标都是赚取用户的现金么?还是别的? 2) 你个人第一次用此类软件是什么时候,你当 ...

  5. 使用composer安装项目依赖

    Composer 是 PHP 的一个依赖管理工具.它允许你申明项目所依赖的代码库,它会在你的项目中为你安装他们 下载并安装composer composer官方文档有好几种安装方法,此处只介绍我实验过 ...

  6. 支付宝即时到账API,网站收到回调页面,输出验证失败,log中responseTxt=错误的问题

    看了网上无外乎这三种原因导致: 1.参数编码问题 2.参数多余问题 3.网络延时问题 以上三种可以参考这个网站给出的解决办法:http://blog.csdn.net/zj53hao/article/ ...

  7. Hello, RealSense!

    这是kinect for windows: 这是华硕 xtion pro: 这是Intel® RealSense™: 几经周折,终于买到了,99美元套件+25美元运费,正在旅途中.

  8. Android动画之Tween动画实战

    Android动画分为Tween动画和Frame动画,上一节通过一个实例介绍了Frame动画,本节将介绍Tween动画.Tween可以把对象进行缩小.放大.旋转和渐变等操作.     Tween动画有 ...

  9. arch安装

    [archwiki-install]: (https://wiki.archlinux.org/index.php/Installation_guide) uefi+gpt Gummiboot #se ...

  10. html+css知识点总结(田彦霞)

    html部分 html头部声明 DOCTYPE是document type(文档类型)的简写,用来说明你用的XHTML或者HTML是什么版本.DOCTYPE声明必须放在每一个XHTML文档最顶部,在所 ...