现在定位功能很常用，所以抽出一些时间将这个功能的知识总结一下作为知识梳理的依据。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. 基于MySql和Sails.js的RESTful风格的api实现

    Sails.js是类似于express的node后台框架,她面向数据库的特性使得面向数据库的服务器的搭建变得特别简单快捷. 现在网上关于Sails的教程大多是基于V0.12版本的,但是现在Sails的 ...

  2. Linux 运维工程师学习成长路线上要经历哪四个阶段？

    之前曾看到一篇新闻,Linux之父建议大家找一份基于Linux和开源环境的工作.今天就来聊一聊我的想法,本人8年Linux运维一线经验,呆过很多互联网公司,从一线运维做到运维架构师一职,也见证了中国运 ...

  3. layui 图片与表单一起提交 + layer.photos图片层预览

    HTML基本结构: <form class="layui-form" action="" id="feedBackForm"> ...

  4. Linux中Kibana部署

    1.下载kibana安装包kibana-5.5.0-linux-x86_64.tar.gz tar –xzf kibana-5.5.0-linux-x86_64.tar.gz解压 把文件移动到 Mv ...

  5. JAVA中判断年月日格式是否正确（支持判断闰年的2月份）

    一.先说一下年月日(yyyy-MM-dd)正则表达式: 1.年月日正则表达式:^((19|20)[0-9]{2})-((0?2-((0?[1-9])|([1-2][0-9])))|(0?(1|3|5| ...

  6. python学习笔记：第15天 初识面向对象

    目录 1. 面向对象和面向过程 2. 面向对象如何编写: 3. 面向对象的三大特征 封装 继承 多态 1. 面向对象和面向过程 面向对象和面向过程的理解: ⾯向过程: ⼀切以事物的流程为核⼼. 核⼼是 ...

  7. C语言Windows程序开发—MessageBox函数介绍【第01天】

    (一)MessageBox函数的参数介绍: int MessageBox ( HWND hWnd, //弹出MessageBox对话框所属的窗口句柄 LPCTSTR lpText, //指向Messa ...

  8. 2018南京网络赛L题：Magical Girl Haze（最短路分层图）

    题目链接:https://nanti.jisuanke.com/t/31001 解题心得: 一个BZOJ的原题,之前就写过博客了. 原题地址:https://www.lydsy.com/JudgeOn ...

  9. MySQL入门第三天（上）——函数与视图

    一.MySQL函数 同样的,完整的函数可以参照开源中国的手册:http://tool.oschina.net/apidocs/apidoc?api=mysql-5.1-zh 1.字符函数 CONCAT ...

  10. 北京Uber优步司机奖励政策（12月15日）

    用户组:人民优步及电动车(适用于12月15日) 滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:htt ...