现在定位功能很常用，所以抽出一些时间将这个功能的知识总结一下作为知识梳理的依据。HTML5 Geolocation的定位用法很简单，首先请求位置信息，用户同意，则返回位置信息。HTML5 Geolocation仅仅是用来检索定位信息的API，至于底层是如何定位的他也不知道，他就相当于一个传信的，你说是1，ok，那我就给用户传个1，仅此而已。

　　1).位置信息来源的分类和特点

　　　　1.IP定位

　　　　优点：任何地方都可以。

　　　　　　　在服务器端处理。

　　　　缺点：不准确，只能精确到市级。

　　　　2.GPS定位

　　　　优点：比较准确。

　　　　缺点：定位时间长。

　　　　　　　室内效果不好。

　　　　　　　需要硬件设备支持。

　　　　3.Wi-Fi定位

　　　　优点：精确。

　　　　　　　简单快捷。

　　　　　　　可在室内定位。

　　　　缺点：适合大城市，对于乡村无接入点的地区几乎用不了。

　　　　4.手机定位

　　　　优点：非常精确。

　　　　　　　可在室内使用。　　

　　　　　　　简单快捷。

　　　　缺点：在没有基站的地方几乎用不了。

　　　　5.自定义定位

　　　　优点：可以获取比程序定位服务更准确的位置数据。

　　　　　　　允许地理定位服务的结果作为备用位置信息。

　　　　　　　用户自行输入可能比自动检测更快。

　　　　缺点：可能不准确，特别是当用户的位置改变的时候。

　　2)Geolocation AIP的使用

　　　　1.检测浏览器的支持性。

　　　　在HTML5中，通过window.navigator对象下新增geolocation属性来判断浏览器的兼容性。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script>

    function geolocationSupport()

    {

        if(!navigator.geolocation)

        {

            alert('当前浏览器不支持HTML5 Geolocation')

        }

        else

        {

            alert('当前浏览器支持HTML5 Geolocation')

        }

    }

    geolocationSupport();

</script>

</body>

</html>

　　　　2.获取当前地理位置

　　　　我们使用getCurrentPosition(success(position),error(err),options)方法来获取当前用户的地理位置。

　　　　success(position)回调函数是在获取到地理信息时调用的，其中的position参数是一个对象包括: latitude(纬度)

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　longitude(经度)

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　altitude(海拔高度)

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　accuracy(纬度和经度的精度，以米为单位)

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　latitudeAccuracy(海拔高度的精度，以米为单位)

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　heading(设备的前进方向),speed(设备的前进速度以单位m/s)

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　timestamp(获取位置的时间)。

　　　　error(err)回电函数是在获取地理位置失败时调用的，其中err参数有俩个属性：code和message，code{1:表示用户拒绝了定位服务,2:获取不到位置信息,3:获取信息超时错误}，message是字符串，表示错误信息。

　　　　opations是一些可选属性的列表包括: enableHighAccuracy(是否要求高精度的地理位置信息),值为true或false。

　　　　　　　　　　　　　　　　　　　　　timeout(对地理信息获取操作做一个超时限制，如果超时，则返回错误)，值为数字，单位为毫秒。

　　　　　　　　　　　　　　　　　　　　　maximumAge(对地理位置信息进行缓存的有效时间做一个限制)，值为数字，单位为毫秒。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<script>

    function geolocationSupport()

    {

        if(!navigator.geolocation)

        {

            alert("你的浏览器不支持HTML5 Geolocation");

        }

        else

        {

            getCurrentPosition();

        }

    }

    function getCurrentPosition(){

        var options={

            enableHighAccuracy:true,

            timeout:60000,

            maximumAge:60000

        }

        navigator.geolocation.getCurrentPosition(success,error,options)

    }

    function success(position)

    {

        var x=position.coords.longitude;

        var y=position.coords.latitude;

        alert("经度为:"+x+"纬度为:"+y);

    }

    function error(err)

    {

        var errorTypes={

            1:"用户拒绝定位服务",

            2:"获取不到定位信息",

            3:"获取定位信息超时"

        }

        alert(errorTypes[err.code]);

    }

    window.onload=geolocationSupport();

</script>

</body>

</html>

下面给大家分享一个在PC端可以显示定位地图的代码：

<!DOCTYPE html>

<html>

<title>HTML5调用百度地图API进行地理定位实例</title>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=134db1b9cf1f1f2b4427210932b34dcb"></script>

</head>

<body style="margin:50px 10px;">

<div id="status" style="text-align: center"></div>

<div style="width:600px;height:480px;border:1px solid gray;margin:30px auto" id="container"></div>

</body>

</html>

<script type="text/javascript">

    window.onload = function() {

        var x,y;

        if(navigator.geolocation) {

            document.getElementById("status").innerHTML = "HTML5 Geolocation is supported in your browser.";

            // 百度地图API功能

            var map = new BMap.Map("container");

            var point = new BMap.Point(x,y);

            map.centerAndZoom(point,12);

            var geolocation = new BMap.Geolocation();

            geolocation.getCurrentPosition(function(r){

                if(this.getStatus() == BMAP_STATUS_SUCCESS){

                    var mk = new BMap.Marker(r.point);

                    map.addOverlay(mk);

                    map.panTo(r.point);

                }

                else {

                    alert('failed'+this.getStatus());

                }

            },{enableHighAccuracy: true})

            return;

        }

    };

</script>

最后再说一下watchPosition和clearPosition，用于地理位置监听和清除监听，watchPosition的用法和getCurrentPosition相同，而且watchPosition与clearPosition的关系和setInterval与clearInterval一样的用法，所以不多说了。

HTML5 Geolocation位置信息定位总结的更多相关文章

  1. HTML5 Geolocation用来定位用户的位置。

    HTML5 Geolocation用来定位用户的位置. 定位用户的位置 HTMl5 Geolocation API用来得到用户的地理位置. 由于这个可能和个人隐私相关.除非用户同意否则不能使用. 浏览 ...

  2. HTML5 Geolocation API地理定位整理（二）

    Geolocation 实例demo 1.使用watchPosition()监听客户端位置 var watchOne=null; if (navigator.geolocation) { //watc ...

  3. HTML5 Geolocation API地理定位整理（一）

    HTML5 Geolocation API 用于获得用户的地理位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的. 浏览器支持 Internet Explorer 9+, ...

  4. HTML5: HTML5 Geolocation（地理定位）

    ylbtech-HTML5: HTML5 Geolocation(地理定位) 1.返回顶部 1. HTML5 Geolocation(地理定位) HTML5 Geolocation(地理定位)用于定位 ...

  5. HTML5+规范：Geolocation(管理设备位置信息) 定位

    Geolocation模块管理设备位置信息,用于获取地理位置信息,如经度.纬度等.通过plus.geolocation可获取设备位置管理对象.虽然W3C已经提供标准API获取位置信息,但在某些平台存在 ...

  6. HTML5 Geolocation（地理定位）

    一.背景 在HTML规范中,增加了获取用户地理信息的API,这样使得可以基于用户位置开发互联网应用,即基于位置服务 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的. Inter ...

  7. html5获取位置信息,h5获取位置信息

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. html5 geolocation配合百度地图api实现定位

    1.了解html5 geolocation HTML5 Geolocation(地理定位)用于定位用户的位置.鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的.=> 使用时 ...

  9. HTML5 学习06——Geolocation（地理定位）

    HTML5 Geolocation(地理定位) HTML5 Geolocation API 用于获得用户的地理位置. 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的. HTML ...

随机推荐

  1. #leetcode刷题之路10-正则表达式匹配

    匹配应该覆盖整个字符串 (s) ,而不是部分字符串.说明:s 可能为空,且只包含从 a-z 的小写字母.p 可能为空,且只包含从 a-z 的小写字母,以及字符 . 和 *. 示例 1:输入:s = & ...

  2. 20181030noip模拟赛T1

    YY的矩阵 YY有一个大矩阵(N*M), 矩阵的每个格子里都有一个整数权值W[i,j](1<=i<=M,1<=j<=N) 对于这个矩阵YY会有P次询问,每次询问这个大矩阵的一个 ...

  3. mysql 多主多从配置，自增id解决方案

    MySQL两主(多主)多从架构配置 一.角色划分 1.MySQL数据库规划 我现在的环境是:zhdy04和zhdy05已经做好了主主架构配置,现在需要的是把两台或者多台从服务器与主一一同步. 主机名 ...

  4. 嵌入式C语言自我修养 01：Linux 内核中的GNU C语言语法扩展

    1.1 Linux 内核驱动中的奇怪语法 大家在看一些 GNU 开源软件,或者阅读 Linux 内核.驱动源码时会发现,在 Linux 内核源码中,有大量的 C 程序看起来“怪怪的”.说它是C语言吧, ...

  5. Python安装及简介

    Python简介 Python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为ABC语言 ...

  6. python之内存与编码的那点事

    一.初始编码 ASCII 码不支持中文 是py2版本中的默认编码 ​Unicode 万国码, 英文使用16位(即两个字节​),中文使用32位(四个字节) ​utf-8 美国最少使用八位(1字节), 欧 ...

  7. R语言爬虫：爬取百度百科词条

    抓取目标:抓取花儿与少年的百度百科中成员信息 url <- "http://baike.baidu.com/item/%E8%8A%B1%E5%84%BF%E4%B8%8E%E5%B0 ...

  8. Android零碎知识点

    1.android:foreground="?attr/selectableItemBackground"   ###设置水波纹效果 2.android:contentDescri ...

  9. Oracle,SQL Server 数据库较MySql数据库，Sql语句差异

    原文:Oracle,SQL Server 数据库较MySql数据库,Sql语句差异 Oracle,SQL Server 数据库较MySql数据库,Sql语句差异 1.关系型数据库 百度百科 关系数据库 ...

  10. EnterpriseDB公司的 Postgres Solution Pack (一)

    下载地址: http://www.enterprisedb.com/products-services-training/products/postgres-plus-solution-pack/do ...