HTML5地理位置概述和地理位置对象的详解

一、地理位置

　　经度 : 南北极的连接线

　　纬度 : 东西连接的线

二、位置信息从何而来

　　IP地址

　　GPS全球定位系统

　　Wi-Fi无线网络

　　基站

三、地理位置对象（navigator.geolocation）

　　– 单次定位请求 ：getCurrentPosition(请求成功，请求失败，数据收集方式)

　　–请求成功函数

　　　　»经度 : coords.longitude

　　　　»纬度 : coords.latitude

　　　　»准确度 : coords.accuracy

　　　　»海拔 : coords.altitude

　　　　»海拔准确度 : coords.altitudeAcuracy

　　　　»行进方向 : coords.heading

　　　　»地面速度 : coords.speed

　　　　»时间戳 : new Date(position.timestamp)

　　– 请求失败函数

　　　　»失败编号：code

　　　　　　»0 : 不包括其他错误编号中的错误

　　　　　　»1 : 用户拒绝浏览器获取位置信息

　　　　　　»2 : 尝试获取用户信息，但失败了

　　　　　　»3 : 设置了timeout值，获取位置超时了

　　–数据收集 : json的形式

　　　　»enableHighAcuracy : 更精确的查找，默认false

　　　　»timeout : 获取位置允许最长时间，默认infinity

　　　　»maximumAge : 位置可以缓存的最大时间，默认0

<script>

//LBS : 基于地图信息的应用

window.onload = function(){

    var oInput = document.getElementById('input1');

    var oT = document.getElementById('t1');

    oInput.onclick = function(){

        navigator.geolocation.getCurrentPosition(function(position){

            oT.value += '经度:' + position.coords.longitude+'\n';

            oT.value += '纬度 :' + position.coords.latitude+'\n';

            oT.value += '准确度 :' + position.coords.accuracy+'\n'; //就是经度和纬度的准确度，没什么用处

            oT.value += '海拔 :' + position.coords.altitude+'\n';

            oT.value += '海拔准确度 :' + position.coords.altitudeAcuracy+'\n';

            oT.value += '行进方向 :' + position.coords.heading+'\n';   //移动设备上才有用，PC不支持

            oT.value += '地面速度 :' + position.coords.speed+'\n';        //移动设备上才有用，PC不支持

            oT.value += '时间戳:' + new Date(position.timestamp)+'\n';

        },function(err){

            alert( err.code );//err.code // 失败所对应的编号

        },{

            enableHighAcuracy : true,

            timeout : 5000,

            maximumAge : 5000        //每次请求定位的时候，如果不超过这个设置的时间，那么就不重新请求定位，而是用缓存

        });

    };

};

</script>

</head>

<body>

    <input type="button" value="请求" id="input1" /><br />

    <textarea id="t1" style="width:400px; height:400px; border:1px #000 solid;"></textarea>

</body>

　　–多次定位请求 : watchPosition(像setInterval)

　　　　»移动设备有用，位置改变才会触发

　　　　»配置参数：frequency 更新的频率

　　–关闭更新请求 : clearWatch(像clearInterval)

<script>

//LBS : 基于地图信息的应用

window.onload = function(){

    var oInput = document.getElementById('input1');

    var oT = document.getElementById('t1');

    var timer = null;

    oInput.onclick = function(){

        timer = navigator.geolocation.watchPosition(function(position){  //多次定位请求，返回一个id，通过这个id清除多次定位请求

            oT.value += '经度:' + position.coords.longitude+'\n';

            oT.value += '纬度 :' + position.coords.latitude+'\n';

            oT.value += '准确度 :' + position.coords.accuracy+'\n';

            oT.value += '海拔 :' + position.coords.altitude+'\n';

            oT.value += '海拔准确度 :' + position.coords.altitudeAcuracy+'\n';

            oT.value += '行进方向 :' + position.coords.heading+'\n';

            oT.value += '地面速度 :' + position.coords.speed+'\n';

            oT.value += '时间戳:' + new Date(position.timestamp)+'\n';

        },function(err){

            alert( err.code );// 失败所对应的编号

            navigator.geolocation.clearWatch(timer);//通过多次定位请求返回的id关闭更新请求

        },{

            enableHighAcuracy : true,

            timeout : 5000,

            maximumAge : 5000,

            frequency : 1000    //更新的频率(多次定位请求的频率)

        });

    };

};

</script>

</head>

<body>

    <input type="button" value="请求" id="input1" /><br />

    <textarea id="t1" style="width:400px; height:400px; border:1px #000 solid;"></textarea>

</body>

HTML5地理位置概述和地理位置对象的详解的更多相关文章

javascript event（事件对象）详解
javascript event(事件对象)详解 1. 事件对象 1. 事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 什 ...
010-Scala单例对象、伴生对象实战详解
010-Scala单例对象.伴生对象实战详解 Scala单例对象详解函数的最后一行是返回值子项目 Scala伴生对象代码实战 object对象的私有成员可以直接被class伴生类访问,但是不可以被 ...
openerp经典收藏对象定义详解（转载）
对象定义详解原文地址:http://shine-it.net/index.php/topic,2159.0.htmlhttp://blog.sina.com.cn/s/blog_57ded94e01 ...
HTML5有语义的内联元素详解
HTML5有语义的内联元素详解 time标签 time 元素表示一个时间值,比如 5:35 P.M., EST, April 23, 2007.例如: Example Source Code:< ...
JAVA对象头详解（含32位虚拟机与64位虚拟机）
为什么要学习Java对象头学习Java对象头主要是为了解synchronized底层原理,synchronized锁升级过程,Java并发编程等. JAVA对象头由于Java面向对象的思想,在JV ...
18.Java 封装详解/多态详解/类对象转型详解
封装概述简述封装是面向对象的三大特征之一. 封装优点提高代码的安全性. 提高代码的复用性. "高内聚":封装细节,便于修改内部代码,提高可维护性. "低耦合&quo ...
三：python 对象类型详解一：数字（上）
一:python 的数字类型: a)整数和浮点数 b)复数 c)固定精度的十进制数 d)有理分数 e)集合 f)布尔类型 g)无穷的整数精度 h)各种数字内置函数和模块二:各种数字类型的详解 1,数 ...
CorelDRAW中如何复制对象属性详解
复制对象属性是一种比较特殊.重要的复制方法,它可以方便而快捷地将指定对象中的轮廓笔.轮廓色.填充和文本属性通过复制的方法应用到所选对象中.本教程将详解CorelDRAW中如何复制对象属性. Corel ...
HTML5 FileReader读取Blob对象API详解
使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要读取的文件或数据.其中File对象可以是来自用 ...

随机推荐

poj1961 Period
我们考虑KMP算法中fail失配指针的意义. 对于一个模式串(Pattern),位置i对应的失配指针fail[i]是那个位置: 这个位置满足的条件是,子串[0, fail[i])是位置i(不含)的后缀 ...
Opencv中直线的表示方法
[blog算法原理]Opencv中直线的表示方法一.问题的提出: 在实际项目编写过程中,需要对直线(Line)进行特定的处 ...
深入Linux网络核心堆栈（对于netfilter的用法和讲解）
http://blog.csdn.net/wswifth/article/details/5115475 注册一个hook函数是围绕nf_hook_ops数据结构的一个非常简单的操作,nf_hook_ ...
Android JUnit Test——批量运行测试代码
转载请注明出自天外归云的博客园:http://www.cnblogs.com/LanTianYou/ Android测试三要素写Android测试用例有三要素,一是我们用的“安卓模拟器device” ...
Mybatis 和 Spring配置
一.使用的jar包就不详细讲解了,下载了Mybatis 和 Spring 的jar包基本上都添加上去了. 一图概括:(这是我使用的ar包,有些不是Mybatis 和 Spring 的 ) 二. web ...
vim中如何替换
1) 文件内全部替换: :%s#abc#123#g (如文件内有#,可用/替换,:%s/abc/123/g) --注:把abc替换成123 (或者: %s/str1/str2/g 用str ...
2016年10月23日星期日 --出埃及记 Exodus 19:7
2016年10月23日星期日 --出埃及记 Exodus 19:7 So Moses went back and summoned the elders of the people and set ...
zookeeper系列之七—从远程调用认识zookeeper
http://www.csdn.net/article/2014-01-02/2817944-zookeeper 在Hadoop的学习过程中,Zookeeper是让很多初学者困惑的技术,远程调用服务是 ...
centos6.6下编译安装mysql5.6之后启动失败：Starting MySQL... ERROR! The server quit without updating PID file (/var/lib/mysql/localhost.localdomain.pid).
今天在编译安装mysql5.6时候出现Starting MySQL... ERROR! The server quit without updating PID file (/var/lib/mysq ...
是否用new来新建对象
class A{ }: 1.不使用new来新建对象 A a: 使用完后什么也不用做,系统自动调用析构函数.使用空间是栈. 2.使用new来新建对象 A* a=new A(); delete a;/ ...

HTML5地理位置概述和地理位置对象的详解

HTML5地理位置概述和地理位置对象的详解的更多相关文章

随机推荐

热门专题