现在定位功能很常用，所以抽出一些时间将这个功能的知识总结一下作为知识梳理的依据。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 中级 - 救生艇(105)

    第 i 个人的体重为 people[i],每艘船可以承载的最大重量为 limit. 每艘船最多可同时载两人,但条件是这些人的重量之和最多为 limit. 返回载到每一个人所需的最小船数.(保证每个人都 ...

  2. layer父界面调用子弹窗的方法和获取子弹窗的元素值总结

    layer.open({ type: 2 ,title: false //不显示标题栏 ,closeBtn: false ,area: ['460px', '45%'] ,shade: 0.5 ,id ...

  3. 在tornado中使用异步mysql操作

    在使用tornado框架进行开发的过程中,发现tornado的mysql数据库操作并不是一步的,造成了所有用户行为的堵塞.tornado本身是一个异步的框架,要求所有的操作都应该是异步的,但是数据库这 ...

  4. xshell安装教程

    Xshell安装使用教程 Xshell 是一个强大的安全终端模拟软件,它支持SSH1, SSH2, 以及Microsoft Windows 平台的TELNET 协议.Xshell 通过互联网到远程主机 ...

  5. JSP + servlet 源码 实现文件的上传

    JSP页面 upLoad.jsp _________________________________ <%@ page language="java" import=&quo ...

  6. 使用TryParse()来执行数值转换

    static void Main() { var ageText = "25"; if (int.TryParse(ageText,out int age)) { Console. ...

  7. 大数据学习--day04(选择结构、循环结构、大数据java基础面试题)

    选择结构.循环结构.大数据java基础面试题 switch: 注意: byte short int char String(jdk1.7支持) 不能是 long float double boolea ...

  8. Hadoop 动态扩容 增加节点

    基础准备 在基础准备部分,主要是设置hadoop运行的系统环境 修改系统hostname(通过hostname和/etc/sysconfig/network进行修改) 修改hosts文件,将集群所有节 ...

  9. Java设计模式（18）——行为模式之迭代子模式（Iterator）

    一.概述 概念 UML简图 // Aggregate:聚集(集合) 角色 抽象迭代子:定义遍历元素所需要的接口 具体迭代子:实现抽象迭代子接口,保持游标 聚集/具体聚集:定义/实现创建迭代子对象的接口 ...

  10. CDH集群搭建视频教程 百度云网盘下载

     CDH集群搭建视频教程 百度云网盘下载 链接: http://pan.baidu.com/s/1i5DVBlb   密码:2mny