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获取到用户的 ...

随机推荐

Qt Mac 在软件 icns图标制作
1.首先,下载一个电话Icon Composer软件之前Xcode像这个东西,现在,我不知道有或无,迷茫,一世Xcode很少. Icon Composer是苹果出的. 下载地址: http://ww ...
Android开发系列（十九个）：至SimpleAdapter设置样式
Adapter任务:在数据adapter处理后做.展会上的观点对于一般ArrayAdapter供.传递给ArrayAdapter之后就能够在视图上用一个列表显示出这个字符串数组. 比例如以下边的代码 ...
android 简单的登录
一直都知道WEB通过登录后session拿着回答,如今,安卓不知道怎么弄的. 研究了一下,它记录.直接在代码: server结束: index.jsp <%@page import=" ...
Java多线程总结之由synchronized说开去(转)
这几天不断添加新内容,给个大概的提纲吧,方面朋友们阅读,各部分是用分割线隔开了的: synchronized与wait()/notify() JMM与synchronized ThreadLocal与 ...
Installing IIS 8.5 on Windows Server 2012 R2
原文 Installing IIS 8.5 on Windows Server 2012 R2 Introduction This document describes how to install ...
malloc实现原理
记得早一段时间,看到一本书上写过delete的一个..今天突然找啦一下资料: malloc()是C语言中动态存储管理的一组标准库函数之中的一个.其作用是在内存的动态存储区中分配一个长度为size的连 ...
Cisco笔试——2014年
笔试时间:11月1日(周六)下午13:00-14:10 申请者考场地点:上海市徐汇区梅陇路130号华东理工大学徐汇校区第六教学楼六大我报的思科的软件开发software,属于(常规) 一共70多道题 ...
开发并调试 Mail Add-in
开发并调试 Mail Add-in (mail app for Outlook) 准备工作如果你的邮箱搭建在 Exchange Server 上,则可以创建邮件应用程序(Mail Add-in)来扩 ...
SQL Server的备份
原文:SQL Server的备份 0.参考文献 1.恢复模式 SQL Server 备份和还原操作发生在数据库的恢复模式的上下文中. 恢复模式旨在控制事务日志维护. “恢复模式”是一种数据库属性,它控 ...
MVC中的Repository模式
1.首先创建一个空的MVC3应用程序,命名为MyRepository.Web,解决方案命名为MyRepository. 2.添加一个类库项目,命名为MyRepository.DAL,添加一个文件夹命名 ...

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

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

随机推荐

热门专题