一 地理定位

  HTML5 Geolocation(地理定位)用于定位用户的位置。

1 地理定位

地理位置
  经度  :   南北极的连接线
  纬度  :   东西连接的线

位置信息从何而来:

  • IP地址
  • GPS全球定位系统
  • Wi-Fi无线网络
  • 手机地理定位

1)IP地址

    IP地址的地理定位方法,其返回的地理信息通常并不靠谱,基于IP地理的地理定位的实现方式是:自动查找用户的IP地址,然后检索其注册的物理地址,因此如果用户的IP地址是ISP提供的,器位置往往就是服务供应商的物理地址决定,改地址可能距离用户数千米。(误差大,不准确)

2) GPS全球定位系统

只要可以看到天空的地方,GPS就可以提供非常准确的定位结果.GPS定位是通过手机运行在地球周围多个GPS微信实现实现的,但是它的定位事件较长。因此它不是和需要快速响应的应用程序。

3) WI-FI地理定位

基于WI-FI的地理定位信息是通过三角距离计算得出的,这个三角距离指的是用户当前位置到已知的多个Wi-Fi接入点,它在室内也非常准确,在乡村这些无线接入点较少的地区效果不好。

4)手机地理定位

基于手机的地理定位信息是通过用户到一些基站的三角距离确定的,这中方法通常基于WiFi和基于GPS的地理定位信息结合使用。

2 geolocation api

navigator.geolocation
  单次定位请求  :getCurrentPosition(请求成功,请求失败,数据收集方式)
  请求成功函数

  • 经度 :  coords.longitude
  • 纬度 :  coords.latitude
  • 准确度 :  coords.accuracy
  • 海拔 :  coords.altitude
  • 海拔准确度 :  coords.altitudeAcuracy
  • 行进方向 :  coords.heading
  • 地面速度 :  coords.speed
  • 请求的时间: new Date(position.timestamp)

3 请求失败函数

失败编号  :code

  • 0  :  不包括其他错误编号中的错误
  • 1  :  用户拒绝浏览器获取位置信息
  • 2  :  尝试获取用户信息,但失败了
  • 3  :   设置了timeout值,获取位置超时了

数据收集 :  json的形式

  • enableHighAcuracy  :  更精确的查找,默认false
  • timeout  :  获取位置允许最长时间,默认infinity
  • maximumAge :  位置可以缓存的最大时间,默认0

4 多次定位请求  :  watchPosition

移动设备有用,位置改变才会触发
配置参数:frequency 更新的频率
关闭更新请求  :  clearWatch

5 浏览器打开允许共享地理位置权限

1) FireFox

参考资料:

https://support.mozilla.org/zh-CN/kb/%E9%A1%B5%E9%9D%A2%E4%BF%A1%E6%81%AF%E7%AA%97%E5%8F%A3

https://www.mozilla.org/zh-CN/firefox/geolocation/

2) Chrome

6 例子

1)获取一次地理位置

<!doctype html><html >    <head>           <meta charset="UTF-8">                  <title>Document</title>        <style>                     #div {                width: 400px;                height: 400px;                border: 1px solid red;            }        </style>    </head>

    <body>              <input type="button" value="请求" id="btn"  style="width: 200px;height: 100px;" >        <div id="div"></div>        <script>            var btn = document.getElementById("btn");

            var div = document.getElementById("div");            btn.onclick = function() {                div.innerHTML ="";                //alert(1);                navigator.geolocation.getCurrentPosition(function(position) {                    console.log(position.coords.longitude);

                    div.innerHTML += "经度:" + position.coords.longitude + "<br/>";                    div.innerHTML += "纬度:" + position.coords.latitude + "<br/>";                    div.innerHTML += "准确度:" + position.coords.accuracy + "<br/>";                    div.innerHTML += "海拔准确度 :" + position.coords.altitudeAcuracy + "<br/>";                    div.innerHTML += "行进方向:" + position.coords.heading + "<br/>";                    div.innerHTML += "地面速度:" + position.coords.speed + "<br/>";                    div.innerHTML += "请求的时间:" + new Date(position.timestamp);

                }, function(error) {                    switch(error.code) {                        case 1:                            alert("位置服务被拒绝。");                            break;                        case 2:                            alert("暂时获取不到位置信息。");                            break;                        case 3:                            alert("获取信息超时.");                            break;                        default:                            alert("未知错误。");                        break;                    }                }, {                    enableHighAcuracy: true,                    timeout: 99999999,                    maximumAge: 9999999999                });

            }        </script>    </body>

</html>

注意:timeout,maximumAge设置长一点,太短容易报错,响应慢。

2) 连续获得多次地理位置

<!doctype html><html >    <head>        <meta charset="UTF-8">        <title>Document</title>        <style>                      #div {                width: 400px;                //height: 400px;                border: 1px solid red;            }        </style>    </head>

    <body>               <input type="button" value="请求" id="btn"  style="width: 200px;height: 100px;">        <div id="div"></div>        <script>            var btn = document.getElementById("btn");

            var div = document.getElementById("div");            btn.onclick = function() {                alert(1);                                navigator.geolocation.watchPosition(function(position) {                    console.log(position.coords.longitude);

                    div.innerHTML += "<br/>------------------------<br/>";                    div.innerHTML += "经度:" + position.coords.longitude + "<br/>";                    div.innerHTML += "纬度:" + position.coords.latitude + "<br/>";                    div.innerHTML += "准确度:" + position.coords.accuracy + "<br/>";                    div.innerHTML += "海拔准确度 :" + position.coords.altitudeAcuracy + "<br/>";                    div.innerHTML += "行进方向:" + position.coords.heading + "<br/>";                    div.innerHTML += "地面速度:" + position.coords.speed + "<br/>";                    div.innerHTML += "请求的时间:" + new Date(position.timestamp);

                }, function(error) {                    switch(error.code) {                        case 1:                            alert("位置服务被拒绝。");                            break;                        case 2:                            alert("暂时获取不到位置信息。");                            break;                        case 3:                            alert("获取信息超时.");                            break;                        default:                            alert("未知错误。");                        break;                    }            navigator.geolocation.clearWatch();                }, {                    enableHighAcuracy: true,                    timeout: 99999999,                    maximumAge: 9999999999                });

            }        </script>    </body>

</html>

二 百度地图

百度秘钥

应用ID 应用名称 访问应用(ak) 应用类别 备注信息(双击更改) 应用配置
3357282 cloudyWeb 44R7nksmLBjTE1fkdlXGd0VU 浏览器端   设置删除

百度 Map Api

百度地图-开发者中心
http://developer.baidu.com/map/index.html

百度地图-坐标拾取
http://api.map.baidu.com/lbsapi/getpoint/index.html

百度地图-覆盖物
http://developer.baidu.com/map/jsdemo.htm

百度地图-GPS
http://developer.baidu.com/map/jsdemo.htm#c2_5

百度地图-IP 定位
http://developer.baidu.com/map/ip-location-api.htm

  百度地图例子。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
    body, html,#allmap {width: %;height: %;overflow: hidden;margin:;font-family:"微软雅黑";}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=44R7nksmLBjTE1fkdlXGd0VU"></script>
    <title>地图展示</title>
</head>
<body>
    <div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");    // 创建Map实例
    map.centerAndZoom();  // 初始化地图,设置中心点坐标和地图级别
    map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
    map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
</script>

  地理应用结合百度地图例子。

参考资料: http://developer.baidu.com/map/jsdemo.htm#a1_2

例子:

<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">
            body,
            html,
            #allmap {
                width: %;
                height: %;
                overflow: hidden;
                margin: ;
                font-family: "微软雅黑";
            }
        </style>

        <style>
            #div {
                width: 400px;
                height: 400px;
                border: 1px solid red;
            }
        </style>

        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=44R7nksmLBjTE1fkdlXGd0VU"></script>
        <title>地图展示</title>
    </head>

    <body>
        <input type="button" value="请求" id="btn" style="width: 100%;height: 100px;">
        <div id="allmap"></div>
    </body>

</html>
<script type="text/javascript">
    //地理位置请求
    var btn = document.getElementById("btn");

    var div = document.getElementById("div");
    btn.onclick = function() {
        //alert(1);
        navigator.geolocation.getCurrentPosition(function(position) {
            alert("经度" + position.coords.longitude + "\n" + "纬度:" + position.coords.latitude);
            var longitude = position.coords.longitude;
            var latitude = position.coords.latitude;

            // 百度地图API功能
            var map = new BMap.Map("allmap"); // 创建Map实例
            map.centerAndZoom(); // 初始化地图,设置中心点坐标和地图级别
            map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
            //map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
            map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

        }, function(error) {
            switch(error.code) {
                :
                    alert("位置服务被拒绝。");
                    break;
                :
                    alert("暂时获取不到位置信息。");
                    break;
                :
                    alert("获取信息超时.");
                    break;
                default:
                    alert("未知错误。");
                    break;
            }
        }, {
            enableHighAcuracy: true,
            timeout: ,
            maximumAge:
        });

    }
</script>

HTML5学习总结-03 地理定位的更多相关文章

  1. HTML5 学习06——Geolocation(地理定位)

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

  2. HTML5学习笔记 Geolocation(地理定位)

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

  3. 从零开始学 Web 之 HTML5(三)网络监听,全屏,文件读取,地理定位接口,应用程序缓存

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  4. 基于浏览器的HTML5地理定位

    基于浏览器的HTML5地理定位 地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML ...

  5. HTML5地理定位,百度地图API,知识点熟悉

    推断浏览器的兼容问题: IE9+支持地理定位,FF Chrome新版支持地理定位  if (navigator.geolocation) {        alert('支持地理定位');   } e ...

  6. HTML5 总结-地理定位-6

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

  7. HTML5 02. 多媒体控件、拖拽事件、历史记录、web存储、应用程序缓存、地理定位、网络状态

    多媒体 video:是行内块(text-align: center; 对行内块适用) <figure></figure>: 多媒体标签 : <figcaption> ...

  8. 小强的HTML5移动开发之路(18)——HTML5地理定位

    来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...

  9. HTML5 — 地理定位

    Geolocation:地理定位,获取当前浏览器所在的地理坐标信息(包括经度.纬度.海拔高度.移动速度),实现LBS应用(Location Based Service)——基于定位的服务,如订   餐 ...

随机推荐

  1. 代码导出Reporting Services报表文件

    背景部分 使用Reporting Services很容易制作和发布我们需要的报表,报表效果也还不错 不过如果报表数据过大或报表数量过多,打开及查看报表感觉可能就是另外一回事了 好在Reporting ...

  2. 【Android】ListView监听上下滑动(判断是否显示返回顶部按钮

    设置滚动监听判断ListView的滚动方向同时获取屏幕高度.ListView实际高度,判断是否需要展示返回顶部按钮 package com.zihao.activity;   import java. ...

  3. Ubuntu 升级VisualBox后无法启动 Kernel driver not installed (rc=-1908)

    VisualBox之所以在Linux上比传统的VMware快得多,关键一点就是它和Linux内核的结合比较紧密,这也是开源的优点. 不过Linux内核更新很频繁,每次更新内核后启动VirtualBox ...

  4. IE7和IE8出现的计算判断问题

    吸住底部菜单 IE7和IE8下会卡死的算法 ; } function fixedBar(){ var _height=$(this).height()+$(this).scrollTop(); var ...

  5. 转:C++:从子类访问父类的私有函数

    众所周知,c和c++的数组都是不安全的,因为无论c还是c++都不提供数组边界检查功能,这使得数组溢出成为可能.从某个意义上说,c和c++是一种缺少监督的语言,然而这也正是其魅力所在.c++给予程序员更 ...

  6. jquery中的选择器01

    <!doctype html> <html> <head> <meta charset="gb2312"> <title> ...

  7. 题解:LOJ540游戏

    题目描述 小L计划进行n场游戏,每场游戏使用一张地图,小 L 会同时使用三辆车在该地图上完成游戏. 小 L 的赛车有三辆,分别用大写字母 A.B.C 表示.地图是一张无向简单图(没有重边或自环),每次 ...

  8. java算法(1)---余弦相似度计算字符串相似率

    余弦相似度计算字符串相似率 功能需求:最近在做通过爬虫技术去爬取各大相关网站的新闻,储存到公司数据中.这里面就有一个技术点,就是如何保证你已爬取的新闻,再有相似的新闻 或者一样的新闻,那就不存储到数据 ...

  9. Can't create/write to file '/tmp/MLjnvU95' (Errcode: 13 - Permission denied)

    今天一个同事反馈往一个MySQL数据库导入数据时,报"ERROR 1 (HY000): Can't create/write to file '/tmp/MLjnvU95' (Errcode ...

  10. JAVA新的一天

    在2019/03/22/今天里,荣幸成为这个班级的一员,认识了新的小伙伴们,上午由老师大体说了一下java的理念,下午安装了DW编辑器,以及讲解了HTML的基本构造,和标签的使用,即使以前学习过,这次 ...