文档章节

HTML5编程之旅 第1站 Geolocation

倪伟伟
 倪伟伟
发布于 2014/02/24 14:19
字数 1749
阅读 230
收藏 10
点赞 1
评论 0

HTML5 Geolocation 初探

让我们假设这样一个场景,有一个web应用程序,它可以向用户提供附近不远处某商场的打折优惠信息。使用HTML5 Geolocation API(地理定位API),可以请求用户共享他们的位置信息。

HTML5 Geolocation技术应用的场景比较多,比如构建计算行走路程、GPS导航的社交应用等。

本文主要探讨HTML5 Geolocation API,包括获取地理位置数据的途径,地理位置数据的隐私以及在实际中的应用等。

目前存在两种地理定位请求:单次定位请求和重复性的位置更新请求。

一、地理位置数据的获取

获取地理位置数据的方法有以下几种:

IP地址地理定位:自动查找用户的IP地址,然后检索其注册的物理地址;

GPS地理定位:通过收集运行在地球周围的多个GPS卫星信号来实现;

Wi-Fi地理定位:通过三角距离计算得出(三角距离:用户当前位置到已知的多个Wi-Fi接入点的距离);

手机地理定位:通过用户到一些基站的三角距离确定;

用户自定义地理定位:用户自己输入地址、邮政编码和其他一些详细信息。

二、地理位置数据的隐私

HTML5 Geolocation规范提供了一套保护用户隐私的机制,除非得到用户明确许可,否则不可能获取位置信息。

HTML5地理定位浏览器和设备之间的交互如下所述:

1) 用户从浏览器中打开位置感知应用程序;

2) 应用程序Web页面加载,然后通过Geolocation函数调用请求位置坐标。浏览器拦截这一请求,然后请求用户授权。我们假设用户同意;

3) 浏览器从其宿主设备中检索坐标信息。例如,IP地址、Wi-FiGPS坐标。这是浏览器内部功能;

4) 浏览器将坐标发送给受信任的外部定位服务,它返回一个详细位置信息,并将该位置信息发回给HTML5 Geolocation应用程序。

三、HTML5 Geolocation API介绍

在访问使用HTML5 Geolocation API的页面时,会触发隐私保护机制。但是如果仅仅是添加代码,而不被任何方法调用,则不会才触发隐私保护机制。

要使用 HTML5 Geolocation API,首先要检查浏览器是否支持,代码如下:

function loadDemo(){
If(navigator.geolocation){
  document.getElementById("support").innerHTML = "HTML5 Geolocation supported.”
}else{
  ocument.getElementById("support”).innerHTML = "HTML5 Geolocation is not supported in your browser.”  
}
}

 单次定位请求API

Void getCurrentPosition(in PositionCallback successCallBack,
                    in optional PositionErrorCallBack errorCallback,
                     in optiona PositionOptions options)

上述的函数要通过navigator.geolocation来调用,各个参数解释如下:

successCallBack:浏览器指明位置数据可用时调用的函数,即收到实际位置信息并进行处理的地方,此函数只接受一个参数:位置对象,包含坐标和一个时间戳;

errorCallback:在获取位置数据出错时的处理地方,向用户说明失败原因,可选参数,但是建议使用;

Options:此对象可调整HML5 Geolocation服务的数据收集方式,可选;可以通过JSON对象进行传递,主要包括enableHighAccuracy(启用HML5 Geolocation服务的高精确度模式、timeout(当前位置所允许的最长时间)、maximumAge(浏览器重新计算位置的时间间隔)。

 

function successCallBack(position){
   var latitude = position.coords.latitude;
   var longitude = position.coords.longitude;
   var accuracy = position.coords.accuracy;
   //此处可以添加代码,把上述三个值显示到页面中。
 
}
ffunction errorCallback(error){
    switch(error.code){
        //UNKNOWN_ERROR = 0 需要通过message参数查找错误的更多信息
        case 0:
            updateStatus("There was an error while retrieving your location:" + error.message);
            break;
        //PERMISSION_DENIED = 1 用户拒绝浏览器获得其共享位置
        case 1:
            updateStatus("The user prevented this page form retrieving a location!");
            break;
        //POSITION_UNAVAILABLE = 2 尝试获取用户位置,但失败
        case 2:
            updateStatus("The browser was unable to determine your location:" + error.message);
            break;
        //TIMEOUT = 3 设置了可选的timeout值,尝试确定用户位置的过程超时
        case 3:
            updateStatus("The browser timed out before retriveing the !");
            break;
    }
}

 

重复性位置请求API 

var watchId = navigator.geolocation.watchPosition(updateLocation,handleLocationError);
  
//停止接收位置更新信息
 navigator.geolocation.clearWatch(watchId);

 

四、使用HML5 Geolocation构建应用

 

使用上述讲解的HML5 Geolocation API来实现 一个简单有用的Web应用程序—距离追踪器,以了解HML5 Geolocation 的强大之处。

本例主要讲述从网页被加载的地方到目前所在位置所经过的距离。使用众所周知的Haversine公式,其能够根据经纬度来计算地球上两点间的距离。如下:

关于上述原理,请参考网上其他教程。

 

使用js实现的Haversine公式如下:

function toRadians(degree){
return degree * Math.PI / 180 ;
}
 
function distance(latitude1,longitude1,latitude1,longitude1){
//R是地球的半径,以km为单位
var R = 6371;
var deltaLatitude = toRadians(latitude2 - latitude1);
var deltaLongitude = toRadians(longitude2 - longitude1);
 
latitude1 = toRadians(latitude1);
latitude2 = toRadians(latitude2);
 
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;
}

 

HTML网页代码入下:

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>HTML5 地理定位</title>
    <link rel="stylesheet" href="styles.css">
</head>
 
<body onload="loadDemo()">
 
<h1>HTML5 地理位置追踪器</h1>
 
<p id="status">你的浏览器不支持HTML5地理定位</p>
 
<h2>当前位置:</h2>
<table border="1">
<tr>
<th width="40" scope="col"><h5>纬度</h5></th>
<td width="114" id="latitude">?</td>
</tr>
<tr>
<td> 经度</td>
<td id="longitude">?</td>
</tr>
<tr>
<td>准确度</td>
<td id="accuracy">?</td>
</tr>
<tr>
<td>最近的时间戳</td>
<td id="timestamp">?</td>
</tr>
</table>
 
<h4 id="currDist">当前旅行的距离: 0.0 km</h4>
<h4 id="totalDist">总的旅行距离: 0.0 km</h4>
 
</body>
 
<script text="text/javascript">
 
var totalDistance = 0;
var lastLat;
var lastLong;
 
Number.prototype.toRadians = function() {
return this * Math.PI / 180;
}
 
function loadDemo(){
If(navigator.geolocation){
updateSatus("你的浏览器支持HTML5地理定位");
navigator.geolocation.watchPosition(updateLocation,handleLocationError,{maximumAge:20000});
}
}
 
function updateSatus(message){
document.getElementById("status").innerHTML = message;
}
 
function distance(latitude1,longitude1,latitude1,longitude1){
//R是地球的半径,以km为单位
var R = 6371;
var deltaLatitude = toRadians(latitude2 - latitude1);
var deltaLongitude = toRadians(longitude2 - longitude1);
 
latitude1 = toRadians(latitude1);
latitude2 = toRadians(latitude2);
 
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;
}
 
function updateLocation(position){
var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        var accuracy = position.coords.accuracy;
        var timestamp = position.timestamp;
document.getElementById("latitude").innerHTML = latitude;
        document.getElementById("longitude").innerHTML = longitude;
        document.getElementById("accuracy").innerHTML = accuracy;
        document.getElementById("timestamp").innerHTML = timestamp;
 
if(accuracy >= 500){
updateStatus("不需要计算精确距离");
return;
}
 
if((lastLat != null) && (lastLong !=null)){
var currentDistance = distace(latitude, longitude, lastLat, lastLong);
document.getElementById("currDist").innerHTML =
              "当前旅行的距离: " + currentDistance.toFixed(4) + " km";
 
            totalDistance += currentDistance;
 
            document.getElementById("totalDist").innerHTML =
              "总的旅行距离: " + currentDistance.toFixed(4) + " km";
}
 
lastLat = latitude;
lastLong = longitude;
 
updateStatus("成功更新位置。");
}
 
    function handleLocationError(error) {
        switch(error.code)
        {
        case 0:
          updateStatus("检索位置发生错误:" + error.message);
          break;
        case 1:
          updateStatus("用户阻止检索位置信息。");
          break;
        case 2:
          updateStatus("浏览器不能检索位置信息:" + error.message);
          break;
        case 3:
          updateStatus("浏览器检索位置信息超时。");
          break;
        }
    }
 
</script>
 
</html>


© 著作权归作者所有

共有 人打赏支持
倪伟伟
粉丝 21
博文 11
码字总数 10899
作品 0
西安
高级程序员
HTML5编程之旅 第6站Web Storage

Web Storage,有时也称为DOMStorage,它提供在Web请求之间持久化数据,在此之前,远程Web服务器需要存储客户端和服务器间交互使用的所有相关数据。利用Web Storage,开发者可以将需要跨请求重...

倪伟伟
2014/03/26
0
0
HTML5编程之旅 第4站 Forms

涉及到Web开发的,肯定要涉及到HTML表单,本节将带你走入HTML5表单的世界。 一、HTML5 Forms概述 熟悉HTML表单的开发人士,可以很容易的适应HTML5 Forms的新增功能。 XFomrs是一个以XML为核心...

倪伟伟
2014/02/27
0
1
50个Demo展示HTML5无穷的魅力

Flash和HTML5的比较已经成为现在最热门的主题之一,我们不去争论哪个好哪个不好。和HTML5在很酷的动画和简单的游戏等方面一样,除非HTML5在未来几年有一些重大发展,否则Flash在富内容网页应...

晨曦之光
2012/03/09
0
0
HTML5编程之旅 第5站Web Workers

HTML5 Web Workers可以使得你的Web应用程序具备后台处理能力,能够支持多线程,且可以充分利用多核CPU带来的优势。以避免JavaScript循环持续运行后弹出的警告窗口。 尽管Web Workers功能强大...

倪伟伟
2014/02/28
0
0
史无前例的 HTML5 资源参考指南

尽管 HTML5 规范在 2014 年之前不会有正式版本,很多设计师已经开始试水高级浏览器已经支持的部分 HTML5 功能。HTML5 为 Web 设计和应用开发打开了一扇全新的门,原生支持了以前只可能使用 ...

李长春
2012/03/02
0
1
HTML5 从基础学习之二 --Canvas Geolocation Cache

HTML5 的canvas元素使用JavaScript在网页上绘制图像 其拥有多种绘制路径,矩形,圆形,字符以及添加图像的方法。 1、Canvas元素的创建(规定元素的id,宽度和高度) <canvas id="myCanvas" ...

Drealin
2012/09/07
0
0
扣丁学堂HTML5培训课程怎么样

  在如今,随着移动互联网技术的发展和进步,比如HTML5在移动互联端的应用,让更多人了解到它的丰富性趣味性便利性,但HTML5就包括这些么?扣丁学堂HTML5培训课程怎么样?零基础能学会么?...

扣丁学堂
06/01
0
0
HTML5 Geolocation 定位服务 实例

本例采用html5 Geolocation 定位服务 和 google maps api 3 完成,运行时请确保你的浏览器支持 html5. <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, u......

张亚锋
2012/05/08
0
0
28个你必须知道的HTML5的新特性,技巧以及技术

原文:http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/ 译文来自:http://adamlu.com/?p=584 总结一下: 1. 新的Doctype 尽管......

山哥
2012/05/10
0
0
百行 HTML5 代码实现四种双人对弈游戏

简介: 本文是一个非常具有挑战性的编程,因为 100 行代码,约莫 10000 个字符左右,将实现围棋、五子棋、四子棋和翻转棋四种双人对弈游戏。请注意,这四个对弈游戏不是初级编程者的习作,而...

idea_biu
2012/09/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

java 重写排序规则,用于代码层级排序

1.dataList 是个List<Map<String,Object>> 类型的数据,所以比较的时候是冲map中获取数据,并且数据不能为空。 2.dataList 类型是由自己定义的,new Comparator<Map<String,Object>> 也是对应......

轻量级赤影
6分钟前
0
0
分布式大型互联网企业架构!

摘要: 开发工具 1.Eclipse IDE:采用Maven项目管理,模块化。 2.代码生成:通过界面方式简单配置,自动生成相应代码,目前包括三种生成方式(增删改查):单表、一对多、树结构。生成后的代码...

明理萝
6分钟前
0
1
对MFC程序的一点逆向分析:定位按钮响应函数的办法

因为消息响应函数保存在AFX_MSGMAP_ENTRY数组中, 观察nMessage、nCode、nID、pfn利用IDA在rdata段中搜索即可, 在IDA中找到代码段基址0x401000,函数地址0x403140, 在WinDbg中运行!addre...

oready
6分钟前
0
0
阻抗匹配与史密斯(Smith)圆图基本原理

参考:http://bbs.eeworld.com.cn/thread-650695-1-1.html

whoisliang
12分钟前
0
0
maven配置文件分离

一、 简介 遇到很多次别人处理的项目,测试环境,本地开发和线上环境的配置不一样,每一次部署都要重新修改配置文件,提交审核代码,才能打包,非常不方便。 其实相信很多人都知道可以使用m...

trayvon
12分钟前
0
0
MacOS和Linux内核的区别

导读 有些人可能认为MacOS和Linux内核有相似之处,因为它们可以处理类似的命令和类似的软件。甚至有人认为苹果的MacOS是基于linux的。事实上,这两个内核的历史和特性是非常不同的。今天,我...

问题终结者
28分钟前
1
0
SpringBoot | 第八章:统一异常、数据校验处理

前言 在web应用中,请求处理时,出现异常是非常常见的。所以当应用出现各类异常时,进行异常的捕获或者二次处理(比如sql异常正常是不能外抛)是非常必要的,比如在开发对外api服务时,约定了响...

oKong
36分钟前
2
0
mysql高级

一、存储引擎 InnoDB MyISAM 比较 二、数据类型 整型 浮点数 字符串 时间和日期 三、索引 索引分类 索引的优点 索引优化 B-Tree 和 B+Tree 原理 四、查询性能优化 五、切分 垂直切分 水平切分...

丁典
56分钟前
1
0
rsync通过同步服务、系统日志、screen工具

rsync通过后台服务同步 在远程主机中建立一个rsync服务器,在服务器上配置好rsync的各种应用,然后将本机作为rsync的一个客户端连接远程的rsync服务器。 首先在A机器上建立并且配置rsync的配...

黄昏残影
今天
5
0
Spring Cloud Gateway 接口文档聚合实现

在微服务架构下,通常每个微服务都会使用Swagger来管理我们的接口文档,当微服务越来越多,接口查找管理无形中要浪费我们不少时间,毕竟懒是程序员的美德。 由于swagger2暂时不支持webflux 走...

冷冷gg
今天
150
2

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部