现在定位功能很常用，所以抽出一些时间将这个功能的知识总结一下作为知识梳理的依据。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. 【HDOJ 1285】确定比赛名次（拓扑排序+优先队列）

    Problem Description有N个比赛队(1<=N<=500),编号依次为1,2,3,....,N进行比赛,比赛结束后,裁判委员会要将所有参赛队伍从前往后依次排名,但现在裁判委员 ...

  2. binlog2sql 用法

    binlog2sql 用法 使用场景:binlog2sql是根据mysql的binlog (要求格式是row)反解析出delete,update操作,对误操作数据进行还原. https://githu ...

  3. 爬虫——Scrapy框架案例一：手机APP抓包

    以爬取斗鱼直播上的信息为例: URL地址:http://capi.douyucdn.cn/api/v1/getVerticalRoom?limit=20&offset=0 爬取字段:房间ID. ...

  4. 同步请求和异步请求的区别（理解ajax用）

    同步请求:发送方发送数据包后,等待接收方发回响应之后,才能发送下一个数据包的通信方式. 异步请求:发送方发送数据包后,不用等待接收方发回响应,就可以发送下一个数据包的通信方式. 同步通信:要求通信双方 ...

  5. jQuery获取Select option 选择的Text和 Value

    获取一组radio被选中项的值:var item = $('input[name=items][checked]').val();获取select被选中项的文本var item = $("s ...

  6. 【rabbitmq消息队列配置】

    #erlang语言支持包 #rabbitmq-server安装支持 #添加用户 #删除用户 #用户角色 #启动 #登录 #管理界面 #guest登录不了: Rabbitmq.conf文件添加 #开启管 ...

  7. Java中常见的比较

    一.StringBuffer.StringBuilder.String 1) 都是 final 类, 都不允许被继承; 2) String 长度是不可变的, StringBuffer.StringBu ...

  8. ubuntu下的python网页解析库的安装——lxml, Beautiful Soup, pyquery, tesserocr

    lxml 的安装(xpath) pip3 install lxml 可能会缺少以下依赖: sudo apt-get install -y python3-dev build-e ssential li ...

  9. 树莓派如何连接WIFI

    hello,大家好,我是叶秋! 上一期呢,给大家介绍了如何给树莓派安装系统,有细心的朋友就会发现上一期安装系统的文章漏了一点点知识,不知道机智的你是否有发现呢~~(尴尬

  10. 用树莓派3B+和 ITEAD PN532 读取、破解、写入M1卡

    这是一篇介绍如何用树莓派使用PN532的随笔,介绍了具体的使用步骤. 首先介绍一下: ①.IC卡是非接触式的智能卡,里面一般是一个方形线圈和一个小芯片(用强光照着可以看到).M1卡是IC卡的一种,一般 ...