html5 Geolocation(地理位置定位)学习

1、html5 Geolocation

html5 Geolocation API 使用很简单，请求一个位置信息，如果用户同意，浏览器会返回一个位置信息，该位置是通过用户的底层设备（手机，电脑）
提供给浏览器。位置信息一般包括经度和纬度信息！
经度和纬度坐标信息一般由两种方式表示
a、十进制表示:39.17222
b、DMS角度格式表示：39°10'20"

2、位置从哪里来

html5 Geolocation API不指定设备使用哪种底层技术来定位应用程序的用户，相反，它只是用于检索位置信息的API，而且通过该API检索到的数据只具有某种程度的准确性！它并不能保证设备返回的数据就是精确的。

设备可以使用的数据源如下所示：

IP地址
三维坐标
　　1、GPS（全球定位系统）
　　2、从RFID、Wi-FI和蓝牙到Wi-FI的MAC地址
　　3、GSM或CDMA手机的ID
用户自定义数据

2.1 IP地址地理定位数据

过去，基于IP的地址的地理定位方法是获得位置信息的唯一方式。但其返回的数据通常是不靠谱的，基于IP的地理位置定位方式是：自动查找用户的IP地址然后检索其注册的物理地址，因此如果用户的ip地址是ISP提供的，其位置往往由服务器供应商的物理地址决定！因此这个地址和用户实际的地址可能相差很大。

2.2 GPS地理定位数据

GPS是通过搜集运行在地球周围的多个GPS卫星信号实现的，但是，它的定位时间可能较长，不太适合快速响应的应用程序。而且在室内效果不是很好。

2.3 WI-FI地理定位数据

基于WIFI的地理定位数据是通过三角距离计算得到的，这个三角距离是指用户当前位置已知的多个wifi接入点的距离。不同于GPS,wifi在室内也非常准确。

2.4 手机地理定位数据

基于手机的地理定位数据是通过用户到一些基站的三角距离确定。这种方法可提供相当准确的位置结果。这种方法通常和基于WIFI基于GPS地位结合使用。

2.5 用户自定义数据
用户自己输入的一些地理位置信息

3、处理位置信息

由于位置信息数据属于敏感信息，所以在接到之后必须小心处理，存储和重传。如果用户没有授权存储这些信息，那么应用程序在相应任务完成后立即删除它。

如果需要最位置信息重传，建议先对其进行加密。

4、浏览器支持性检测

function loaddemo(){

            if(navigator.geolocation){

                alert('浏览器支持html5 geolocation');

            }else{

                alert('浏览器不支持html5 geolocation');

            }

        }

        loaddemo();

5、位置请求

　　位置请求有两种

　　1、单次定位请求
　　2、重复性位置更新请求

5.1 单次定位请求

我们看下这个核心函数的调用

void getCurrentPosition(in PositionCallback successCallback,in optional PositionErrorCallback errorCallback,in optional PositionOptions options);
这个方法是通过navigator.geolocation调用的。所以在脚本中需要先取得此对象。
这个方法接收一个必选参数和两个可选的参数
successCallback 必选参数，位置信息请求成功后处理的地方
errorCallback 可选参数，位置信息请求错误后处理的函数
options 可选参数，这个对象可以调整数据搜集的方式

var nvaga = navigator.geolocation;

    nvaga.getCurrentPosition(updatPos,errorLoca);

    function updatPos(position){

        var latitude = position.coords.latitude;//十进制单位

        var longitude = position.coords.longitude;//十进制单位

        var accuracy = position.coords.accuracy;//以m为单位制定纬度和经度与实际位置的差距

        var timestamp = position.timestamp;

        console.log('经度坐标' + latitude);

        console.log('纬度坐标' + longitude);

        console.log('准确度' + accuracy);

        console.log('获取位置数据的时间' + timestamp);//时间戳

    }

    function errorLoca(error){

        switch(error.code){

            case 0:

                console.log('位置信息获取失败，失败原因'+error.message);

            break;

            case 1://错误编码 PERMISSION_DENIED

                console.log('用户拒绝共享其位置信息');

            break;

            case 2://错误编码 POSITION_UNAVAILABLE

                console.log('尝试获取用户位置数据，但失败了');

            break;

            case 3://错误编码 TIMEOUT

                console.log('尝试获取用户的位置数据超时');

            break;

        }

    }

5.2 可选的地理定位请求特性

geolocation 三个可选的参数（enableHighAccuracy,timeout和maximumAge）,将这三个参数传递给html5 geolocation服务以调整数据收集的

方式，这三个参数可以使用json对象传递。
enableHighAccuracy：通知浏览器启用高精度模式，参数的默认值为false,如果启用该参数，可能会没有任何差别，也可能会导致机器花费更多的时间和资源来确定位置，应谨慎使用。
timeout:告诉浏览器获取当前位置信息所允许的最长时间。如果这个时间段未完成，就会调用错误处理函数。默认值为无穷大
maximumAge：这个值表示浏览器重新计算位置的时间间隔，以ms为单位，此值默认为0。
使用可选的参数的调用方式
nvaga.getCurrentPosition(updatPos,errorLoca,{timeout:10000});
告诉浏览器任何处理时间超过10s将会触发错误事件。

5.3 重复性位置请求

navigator.geolocation.watchPosition(updatPos,errorLoca);

通过这么简单的修改后，只要用户位置发生变化，geolocation服务器就会调用updatPos函数。
如果不想使用更新的话可是通过下面的代码清除实时更新
navigator.geolocation.clearWatch(watchID);
这个函数会通知geolocation服务器，程序不想要接收用户的位置信息更新了！

watchID的使用和获取
var watchId = navigator.geolocation.WatchPosition(updatPos,errorLoca);
//清除位置更新
navigator.geolocation.clearWatch(watchId);

6、实例距离跟踪器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Geolocation</title>

</head>

<body onload="loadAct()">

    <div class="">

        <p id="lat"></p>

        <p id="lonat"></p>

        <p id="accur"></p>

        <p id="times"></p>

        <p id="currdis"></p>

        <p id="totalDis"></p>

    </div>

    <p id="status" style="color:#f00"></p>

</body>

<script>

//实例 距离跟踪器

    //通过用户的移动产生的位置更新，计算两个坐标之间的距离，来确定在这短时间内用户行走了多少距离,这里我们使用Haversine公式来计算

    //js实现Haversine公式

    Number.prototype.toRadians = function(){

        return this*Math.PI/180;

    }

    // 计算两个经度和纬度之间的距离

    function distances(latitude1,longitude1,latitude2,longitude2){

        var r = 6371;//定义地球的半径

        var deltaLatitude = (latitude2 - latitude1).toRadians();

        var deltaLongitude = (longitude2 - longitude1).toRadians();

        latitude1 = latitude1.toRadians();

        latitude2 = latitude2.toRadians();

        var a = Math.sin(deltaLatitude/2)*Math.sin(deltaLatitude/2) + Math.cos(latitude1)*Math.cos(latitude2)*Math.sin(deltaLongitude/2)*Math.sin(deltaLongitude/2);

        var c = 2*Math.atan2(Math.sqrt(a),Math.sqrt(1-a));

        var d = r*c;

        return d;

    }

    var toldis = 0.0;

    var lastlat;

    var lastlong;

    function updateError(message){

        var status = document.querySelector('#status');

        status.innerHTML = message;

    }

    function updateStatus(message){

        var status = document.querySelector('#status');

        status.style.color = '#0f0';

        status.innerHTML = message;

    }

    function loadAct(){

        if(navigator.geolocation){

            document.querySelector('#status').innerHTML = '您的浏览器支持html5 地理定位';

            navigator.geolocation.watchPosition(updateLocation,errorLoca,{timeout:20000});

        }

    }

    function updateLocation(position){

        var latitude = position.coords.latitude;//十进制单位

        var longitude = position.coords.longitude;//十进制单位

        var accuracy = position.coords.accuracy;//以m为单位制定纬度和经度与实际位置的差距

        var timestamp = position.timestamp;

        document.querySelector('#lat').innerHTML = '您当前的经度位置'+latitude;

        document.querySelector('#lonat').innerHTML = '您当前的纬度度位置'+latitude;

        document.querySelector('#accur').innerHTML = '准确度'+accuracy;

        document.querySelector('#times').innerHTML = '获取位置时间'+timestamp;

        //合理性检测

        if(accuracy >= 30000){

            updateStatus('需要更准确的信息来计算距离');

            return;

        }

        if(latitude != null && longitude != null){

            var curdis = distances(latitude,longitude,lastlat,lastlong);

            document.querySelector('#currdis').innerHTML = '当前的行走的距离' + curdis;

            toldis += curdis;

            document.querySelector('#totalDis').innerHTML = '您当前行走的总距离为' + toldis +'km';

        }

        lastlat = latitude;

        lastlong = longitude;

    }

    function errorLoca(error){

        switch(error.code){

            case 0:

                updateError('位置信息获取失败，失败原因'+error.message);

            break;

            case 1://错误编码 PERMISSION_DENIED

                updateError('用户拒绝共享其位置信息');

            break;

            case 2://错误编码 POSITION_UNAVAILABLE

                updateError('尝试获取用户位置数据，但失败了');

            break;

            case 3://错误编码 TIMEOUT

                updateError('尝试获取用户的位置数据超时');

            break;

        }

    }

    /*

    */

</script>

</html>

html5 Geolocationk获取的值也可以传递给谷歌或者百度的地图API，来使用谷歌，百度他们自己的API，从而实现更复杂的应用！

html5 Geolocation(地理位置定位)学习的更多相关文章

HTML5 Geolocation(地理位置)
HTML5 Geolocation(地理位置).是用来定位用户的位置的. HTML5 Geolocation API 用于获得用户的地理位置,鉴于该特性可能侵犯用户的隐私权,除非用户同意,否则不能获取 ...
html5的地理位置定位
html5提供的地理位置定位使开发人员不用借助其他软件就能轻松实现位置查找,地图应用,导航等功能. 地理位置定位基本原理GPS, WIFI, IP, 手机信号基站核心对象Geolocation是wi ...
HTML5获取地理位置定位信息
如何使用HTML5地理位置定位功能定位功能(Geolocation)是HTML5的新特性,因此只有在支持HTML5的现代浏览器上运行,特别是手持设备如iphone,地理定位更加精确.首先我们要检测用 ...
HTML5 Geolocation位置信息定位总结
现在定位功能很常用,所以抽出一些时间将这个功能的知识总结一下作为知识梳理的依据.HTML5 Geolocation的定位用法很简单,首先请求位置信息,用户同意,则返回位置信息.HTML5 Geoloc ...
HTML5 地理位置定位（HTML5 Geolocation）原理及应用
地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个 ...
[Javascript] HTML5 地理位置定位（HTML5 Geolocation）原理及应用
地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个 ...
HTML5 Geolocation学习
GeolocationAPI学习,我写的挺枯燥的,直接跳到最后看示例. 5.1 位置信息 HTML5 Geolocation API的使用方法相当简单.请求一个位置信息,如果用户同意,浏览器就会返回位 ...
HTML5 Geolocation 构建基于地理位置的 Web 应用
HTML5 中的新功能 HTML5 是最新一代的 HTML 规范,是 W3C 与 WHATWG 合作的结果,目前仍外于开发中.自从上一代 HTML4,Web 世界已经发生了巨大的变化,HTML5 的到 ...
使用HTML5地理位置定位到城市的方法及注意事项
介绍本文将简述一下如何通过HTML5和百度地图开放平台提供的API来实现对浏览器的定位.实现效果为显示出用户所在的省市,即: XXX省 XXX市. 实现思路利用HTML5 提供的API获取到用户的 ...

随机推荐

变化Android系统属性SystemProperties.set("sys.powerctl", "shutdown")关机分析
基本介绍: 从以前的博客中提到,我们,最后,通过关机过程变化Android关机属性(SystemProperties.java由JNI呼叫接入系统属性),当然,我们也能adb命令变化Android系统 ...
Lazy<T>延迟初始化
延迟初始化:Lazy<T> 1. 概述我们创建某一个对象需要很大的消耗,而这个对象在运行过程中又不一定用到,为了避免每次运行都创建该对象,这时候延迟初始化(也叫延迟实例化)就出场了. 延 ...
[Sqlite] --> Sqlite于Windows、Linux 和 Mac OS X 在安装过程
一个:于 Windows 安装 SQLite 1,下载请訪问SQLite下载页面http://www.sqlite.org/download.html.从Windows 区下载预编译的二进制文件. ...
Linux在device is busy处理
在Linux管理umount设备时,时常会遇到"device is busy", 假设umount一个文件系统碰到这样的情况.而且你并没有在所需卸载的文件夹下.那么非常可能实用户或 ...
CSM认证培训知识汇总
后两天的CSM训练.我们非常颠覆旧观念,有关的一些观点的简要培训记录: 约定大于监管:监督是管理水平.或旧有格局,该公约是一个团队与自己的法规. 工具:传统的管理工具和服务经理,还有许多人是PM正在使 ...
2014在百度之星资格赛的第四个冠军Labyrinth
Problem Description 熊度仅仅是一种冒险的熊,一个偶然落入一个m*n迷宫矩阵,能从矩阵左上角第一个方格開始走,仅仅有走到右上角的第一个格子才算走出迷宫.每一次仅仅能走一格,且仅仅能向 ...
JQUERY prop与attr差额
1. 1-9-1之前和之后之间的差 <html> <script src="Js/jquery-1.9.0.js" type="text/javasc ...
bigdata_hiveserver2报错_thrift
问题一: php客户端,链接hiveserver2 ,报错如下 1: server.TThreadPoolServer (TThreadPoolServer.java:run(215)) - Err ...
iOS开发分析"秘密"App内容页面的效果(两)
@我前几天写的"秘密"的Cell制品的效果,想要的效果还是有差距,并且扩展性非常不好,于是重写封装,把总体视图都放到scrollView中,基本是和secret app 一模一样的 ...
左右linuxserver自己主动重启过程监控和简单的解决方案
转载请注明出处:帘卷西风的专栏(http://blog.csdn.net/ljxfblog) 本周開始,新手游进行删档封測阶段,前两天表现还好,今天更新后出现几次宕机行为.比較影响玩家的測试和体验,我 ...

html5 Geolocation(地理位置定位)学习

html5 Geolocation(地理位置定位)学习的更多相关文章

随机推荐

热门专题