地理位置(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. React Native 一个组件styles BUG

    'use strict'; var React = require('react-native'); var { StyleSheet, PanResponder, View, Text } = Re ...

  2. 作业七:团队项目——Alpha版本冲刺阶段009

    今日安排:组内成员讨论 今日进度:组内成员讨论分工细节以及可能遇到的问题,并提出解决方案

  3. Ubuntu下freeradius-server的安装与mysql-server的关联

    1.创建freeradius数据库 #service mysql start ... #mysql -u root -p Enter password: 456456 ... mysql> cr ...

  4. javaSE学习路线

    Java SE大致可分为以下几块内容: n  对象导论:如何用面向对象的思路来开发 n  深入JVM:Java运行机制以及JVM原理 n  面向对象的特征:封装.继承.抽象.多态 n  数组和容器:容 ...

  5. 我收录整理的优秀OC技术类文章

        自定义导航按钮UIBarButtonItem   关于导航栏的六个小技巧   ios开发的一些小技巧篇一 制作一个可以滑动操作的 Table View Cell - IOS - 伯乐在线 一个 ...

  6. jQuery中的$.grep()方法的使用

    标签: it 分类: jQuery grep()方法用于数组元素过滤筛选 grep(array,callback,invert) array:待过滤数组; callback:处理数组中的每个元素,并过 ...

  7. css 笔记

    外边距合并 当一个元素出现在另一个元素的上面时,第一个元素的下外边距和第二个元素的上外边距会产生合并,两个盒子之间的上下间距为大的数值. 当一个子元素包含在另外一个父元素(假设没有内边距 没有边框), ...

  8. linux清理内存

    free -m echo 1 > /proc/sys/vm/drop_caches

  9. understand equal and gethashcode

    Supposed we have a class below public class TestHash { public int x; int y; public TestHash(int x, i ...

  10. [c++]默认参数

     =================默认参数==================在函数声明时表明默认值,在函数定义时正常定义void function(int a = 2)// 函数声明void fu ...