现在定位功能很常用，所以抽出一些时间将这个功能的知识总结一下作为知识梳理的依据。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. 2018 Wannafly summer camp Day8--连通块计数

    连通块计数 描述 题目描述: 小 A 有一棵长的很奇怪的树,他由 n 条链和 1 个点作为根构成,第 i条链有 ai​ 个点,每一条链的一端都与根结点相连. 现在小 A 想知道,这棵长得奇怪的树有多少 ...

  2. springboot-自定义起步依赖

    自定义起步依赖步骤: 1.  添加configuration注解文件 -          指定什么情况下加载配置 -          使用enableconfigurationProperties ...

  3. axios和ajax，fetch的区别

    1,传统 Ajax 指的是 XMLHttpRequest(XHR), 最早出现的发送后端请求技术,隶属于原始js中,核心使用XMLHttpRequest对象,多个请求之间如果有先后关系的话,就会出现回 ...

  4. python中mysql主从同步配置的方法

    1)安装mysql ubuntu中安装一台mysql了,docker安装另外一台mysql 获取mysql的镜像,主从同步尽量保证多台mysql的版本相同,我的ubuntu中存在的mysql是5.7. ...

  5. Macbook下安装memcached

    参考文献: https://blog.csdn.net/weixin_41827162/article/details/82049520 感谢大佬 安装memcached需要Homebrew 注意点: ...

  6. 【NXP开发板应用—智能插排】3.驱动GPIO点亮外接LED

    [前言] 首先感谢深圳市米尔科技有限公司举办的这次活动并予以本人参加这次活动的机会,以往接触过嵌入式,但那都是皮毛,最多刷个系统之类的,可以说对于嵌入式系统开发这件事情是相当非常陌生的,这次活动为我提 ...

  7. 爬取猫眼TOP100

    学完正则的一个小例子就是爬取猫眼排行榜TOP100的所有电影信息 看一下网页结构: ​ 可以看出要爬取的信息在<dd>标签和</dd>标签中间 正则表达式如下: pattern ...

  8. 一、Django初级

    创建项目,也就是网站 1.cmd,输入:pip3 install Django==2.1.2 2.>>>import django 3.cmd进入需要建项目的文件夹,django-a ...

  9. Artistic Style 3.1

    Artistic Style 3.1 Tab 选项 下面的示例显示空白字符.一个空格(space)用一个 . 表示,一个制表符(tab)用 > (大于号) 表示. ** 默认缩进 ** 如果没有 ...

  10. vim 智能提示插件 YouCompleteMe安装

    按照网上的教程安装该软件,没有一篇是成功的(也有可能是没找对).自己从网上东拼西凑的,终于让自己的vim智能识别了. 1. 升级 vim: (ubuntu) sudo add-apt-reposito ...