地理位置(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. web学习之servlet

    1)web服务软件作用: 把本地资源共享给外部访问 2)tomcat服务器基本操作 : 启动:  %tomcat%/bin/startup.bat 关闭: %tomcat%/bin/shutdown. ...

  2. JS日期类型处理

    Date 操作日期和时间的对象 Date.getDate( ) 返回一个月中的某一天 Date.getDay( ) 返回一周中的某一天 Date.getFullYear( ) 返回Date对象的年份字 ...

  3. android base64 和 aes 加密 解密

    package pioneerbarcode.ccw.com.encryptanddecode;import android.os.Bundle;import android.support.v7.a ...

  4. build and set proxy in Ubuntu

    build http://www.2cto.com/os/201310/249690.html set http://www.360doc.com/content/11/1112/00/2617151 ...

  5. java并发包:线程池 executorservice

    1.newCachedThreadPool()  -缓存型池子,先查看池中有没有以前建立的线程,如果有,就reuse.如果没有,就建一个新的线程加入池中 -缓存型池子通常用于执行一些生存期很短的异步型 ...

  6. Java 自定义注解

    在spring的应用中,经常使用注解进行开发,这样有利于加快开发的速度. 介绍一下自定义注解: 首先,自定义注解要新建一个@interface,这个是一个注解的接口,在此接口上有这样几个注解: @Do ...

  7. [解决方案] pythonchallenge level 3

    http://www.pythonchallenge.com/pc/def/equality.html 根据页面提示:一个小写字母刚刚好被左右3个大写字母包围. 查看页面代码得到需要处理的字符. 将字 ...

  8. 如何在Form++开源组态平台添加硬件采集接口

    E-Form++是一套值得推荐的高品质开源C++矢量图形库,C++编程之所以异常困难,主要就是没有很专业的C++基础架构库有关.E-Form++的出现一定程度上填补了这个空白.是开发工控.监控.建模与 ...

  9. DIV+CSS布局网站基本框架

    html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  10. viewBox A-Z滚动样式

    效果图:       代码实现 (其中使用了ionic框架...) html 代码: <ion-content class='page-location'> <div class=' ...