运用 HTML5 Geolocation 构建依据地舆方位的 Web-Html5-优质IT资源分享社区

admin
管理员
管理员
  • UID1
  • 粉丝29
  • 关注4
  • 发帖数581
  • 社区居民
  • 忠实会员
  • 原创写手
阅读:179回复:0

  运用 HTML5 Geolocation 构建依据地舆方位的 Web

楼主#
更多 发布于:2016-06-03 23:18

 本 文将介绍 html5 供给的一个全新功用:Geolocation,它答运用户在 Web

运用程序中同享他们的方位,使其可以享用方位感知效劳。首要这篇文章将介绍 HTML5 Geolocation

方位信息的构成:纬度、经度,以及取得这些数据的路径(GPS、Wi-Fi 和蜂窝站点)。然后将谈论 HTML5

地舆定位数据的隐私疑问,以及浏览器怎么运用这些数据。最终这篇文章将讨论它在实践中的运用,演示并让您学会怎么运用它构建一个有用的依据地舆方位的 Web

运用。

HTML5 中的新功用

HTML5 是最新一代的 HTML 规范,是 W3C 与 WHATWG

协作的成果,现在仍外于开发中。自从上一代 HTML4,Web 国际现已发作了无穷的改动,HTML5 的到来更大地促进了 Web 的开展,HTML5

供给了许多新的功用,主要有:

新的 HTML 元素,例如 section, nav, header, footer,

article 等

用于绘画的 Canvas 元素

用于多媒体播放的 video 和 audio 元素

用于定位的 Geolocation API

本地存储以及离线运用

Web Workers API

这篇文章主要对 HTML5 用于定位的 Geolocation

功用进行解说,并供给实例,介绍它在实践中的运用。

方位信息

在 HTML5

中,当恳求一个方位信息时,假如用户赞同,浏览器就会回来方位信息,该方位信息是经过支撑地舆定位功用的底层设备(比方笔记本电脑或手机)供给给浏览器

的。方位信息由纬度、经度坐标和一些别的元数据构成。例如北京故宫的方位信息主要由一对纬度和经度坐标构成:纬度:北纬 39.9,经度:东经 116.4。

经纬度坐标有两种表明方法:十进制格局(例如 39.9)和 DMS(Degree Minute

Second,视点)格局(例如 39 ° 54 ′ 20 ″)。HTML5 Geolocation API

回来的坐标格局为十进制格局。除了纬度和经度坐标,HTML5 Geolocation

还供给方位坐标的精确度。除此之外,它还会供给别的一些元数据,比方海拔、海拔精确度、行进方向和速度等,详细状况取决于浏览器地点的硬件设备。

方位信息一般从如下数据源取得:

IP 地址

三维坐标

GPS(Global Positioning System,全球定位系统)

Wi-Fi

手机信号

用户自界说数据

它们各有优缺陷如表 1 所示,为了确保更高的精确度,许多设备运用多个数据源组合的方法。

表 1. 方位信息获取方法比照

数据源

长处

缺陷

IP 地址

任何当地都可用在效劳器端处理

不精确(常常犯错,一般精确到城市级)运算价值大

GPS

很精确

定位时刻长,耗电量大

室内作用差

需求额定硬件设备支撑

Wi-Fi

精确

可在室内运用

简略、方便

在乡村这些 Wi-Fi 接入点少的区域无法运用

手机信号

适当精确

可在室内运用

简略、方便

需求可以拜访手机或其 modem 设备

用户自界说

可取得比程序定位效劳更精确的方位数据用户自行输入也许比自动检查更快

也许很不精确,特别是当用户方位改动后

浏览器支撑状况

各 浏览器对 HTML5 Geolocation 的支撑程度不同,并且还在不断更新中。好音讯是:在

HTML5 的一切功用中,HTML5 Geolocation 是第一批被悉数承受和完成的功用之一,有关规范现已到达一个十分老练的期间,不大也许做太大改动。如表

2 所示,许多浏览器现已支撑 HTML5 Geolocation:

表 2. 浏览器对 HTML5 Geolocation 的支撑状况

浏览器

支撑状况

Firefox

3.5 及以上版别支撑

Chrome

在带有 Gears 的第 2 版 Chrome 中被支撑

Internet Explorer

经过 Gears 插件支撑

Opera

在版别 10 中支撑

Safari

在版别 4 中支撑以完成在 iPhone 上可用

由于浏览器对它的支撑程度不同,在运用之前最佳先检查浏览器是不是支撑 HTML5

Geolocation API。后边将解说怎么检查浏览器是不是支撑此功用。这篇文章中一切示例程序都在 Firefox 12.0 上运转测验成功。

隐私

HTML5 Geolocation

规范供给了一套维护用户隐私的机制。有必要先得到用户清晰答应,才能获取用户的方位信息。不过,从可接触到的 HTML5 Geolocation

运用程序示例中可以看到,一般会鼓励用户同享这些信息。例如,午餐时刻到了,假如运用程序可以让用户知道邻近饭馆的特色菜及其报价和谈论,那么用户就会觉

得同享他们的方位信息是可以承受的。

拜访运用 HTML5 Geolocation API 的页面时,会触发隐私维护机制。图 1 显现了在

Firefox 12.0 中触发隐私维护机制的页面。

图 1. HTML5 Geolocation 在 Firefox 12.0

中触发隐私维护机制

由于方位数据归于灵敏信息,所以接纳到以后,有必要当心地处理、存储和重传。假如用户没有授权存储这些数据,那么运用程序应当在相应使命完成后当即删除它。假如要重传方位数据,主张对其进行加密。

HTML5 Geolocation API

本节将详细介绍 HTML5 Geolocation API 的运用方法。

浏览器支撑性检查

在调用 HTML5 Geolocation API

函数前,需求确保浏览器支撑此功用。当浏览器不支撑时,可以供给一些代替文本,以提示用户晋级浏览器或装置插件(如 Gears)来增强现有浏览器功用。清单 1

是浏览器支撑性检查的一种路径。

清单 1. 检查浏览器支撑性

function testSupport() {

if (navigator.geolocation) {

document.getElementById(“support”).innerHTML = "支撑

HTML5 Geolocation。";

} else {

document.getElementById(“support”).innerHTML =

"该浏览器不支撑 HTML5 Geolocation !主张晋级浏览器或装置插件(如

Gears)。";

}

}

在清单 1 中,testSupport()

函数检查了浏览器的支撑状况。这个函数应当在页面加载的时分就被调用,假如浏览器支撑 HTML5 Geolocation,navigator.geolocation

调用将回来该目标,否则将触发过错。预先界说的 support 元素会依据检查成果显现浏览器支撑状况的提示信息。

方位恳求

在 HTML5 Geolocation 功用中,方位恳求有两种:

单次定位恳求

重复性方位更新恳求

单次方位恳求

在许多运用中,只检索或恳求一次用户方位即可。例如前面说到的,午餐时刻到了,要查询用户邻近饭馆的特色菜及其报价和谈论,就可以运用清单

2 所示的 HTML5 Geolocation API。

清单 2. 单词定位恳求 API

void getCurrentPosition(updateLocation, optional

handleLocationError, optional options);

这个函数承受一个必选参数和两个可选参数。

必 选参数 updateLocation

为浏览器指明方位数据可用时应调用的函数。获取方位操作也许需求较长时刻才能完成,用户不期望在检索方位时浏览器被锁定,这个参数即是异步收到实践方位信

息后,进行数据处理的当地。它一起作为一个函数,只承受一个参数:方位目标

position。这个目标包含坐标(coords)和一个获取方位数据时的时刻戳,许多主要的方位数据都包含在 coords 中,比方:

latitude(纬度)

longitude(经度)

accuracy(精确度)

毫 无疑问,这三个数据是最主要的方位数据。latitude 和 longitude 包含 HTML5

Geolocation 效劳测定的十进制用户方位。accuracy 以 m 为单位拟定纬度和经度值与实践方位间的差距。局限于 HTML5 Geolocation

的完成方法,方位只能是大略的近似值。在出现回来值前请必定要检查回来值的精确度。假如引荐的所谓“邻近的”饭馆,实践上要消耗用户几个小时的旅程,那就

不好了。

坐标也许还包含别的一些数据,不能确保浏览器对其都支撑,假如不支撑则回来 null:

altitude – 海拔高度,以 m 为单位;

altitudeAccuracy – 海拔高度的精确度,以 m 为单位;

heading – 行进方向,相对于正北而言;

speed – 速度,以 m/s 为单位。

清单 3 给出了 updateLocation()

函数的常用完成代码,该函数依据坐标信息履行详细的更新操作:用取得的方位信息别离更新 HTML 页面上三个空间元素的文本。

清单 3. updateLocation() 函数运用示例

function updateLocation(position) {

var latitude = position.coords.latitude;

var longitude = position.coords.longitude;

var accuracy = position.coords.accuracy;

document.getElementById(“纬度”).innerHTML =

latitude;

document.getElementById(“经度”).innerHTML =

longitude;

document.getElementById(“精确度”).innerHTML =

accuracy + “米”;

}

可选参数 handleLocationError

为浏览器指明犯错处理函数。方位信息恳求也许由于一些不可控因素失利,这时,您需求在这个函数中供给对用户的解说。走运的是,该 API

现已界说了一切需求处理的过错状况的过错编号。过错编号 code 设置在过错目标中,过错目标作为 error 参数传递给过错处理程序。这些过错编号有:

UNKNOWN_ERROR (0):不包含在其它过错编号中的过错,需求经过 message

参数查找过错的详细信息。

PERMISSION_DENIED (1):用户拒绝浏览器取得其方位信息。

POSITION_UNVAILABLE (2):测验获取用户信息失利。

TIMEOUT (3):在 options 目标中设置了 timeout

值,测验获取用户方位超时。

在这些状况下,您可以通知用户运用程序运转出了什么疑问,如清单 4 所示。

清单 4. 运用过错处理函数

function handleLocationError(error) {

switch (error.code) {

case 0:

updateStatus(“测验获取您的方位信息时发作过错:” +

error.message);

break;

case 1:

updateStatus(“用户拒绝了获取方位信息恳求。”);

break;

case 2:

updateStatus(“浏览器无法获取您的方位信息。”);

break;

case 3:

updateStatus(“获取您方位信息超时。”);

break;

}

}

可选参数 options 目标可以调整 HTML5 Geolocation

效劳的数据搜集方法。该目标有三个可选参数:

enableHighAccuracy:假如启动该参数,浏览器会启动 HTML5

Geolocation 效劳的高精确度形式,这将致使机器花费更多的时刻和资本来确定方位,应慎重运用。默认值为 false;

timeout:单位为

ms,通知浏览器获取当时方位信息所答应的最长时刻。假如在这个时刻段内未完成,就会调用过错处理程序。默认值为 Infinity,即无穷大(无限制);

maximumAge:以 ms 为单位,表明浏览器从头获取方位信息的时刻间隔。默认值为

0,这意味着浏览器每次恳求时有必要当即从头核算方位。

运用可选参数 options 更新咱们的方位恳求,让其包含一个运用 JSON

目标表明的可选参数,如下所示:

清单 5. 包含 options 的更新方位恳求

navigator.geolocation.getCurrentPosition(updateLocation,

handleLocationError,

{timeout: 10000});

这个调用通知 HTML5 Geolocation,当获取方位恳求的处理时刻超过

10s(10000ms)时触发过错处理程序,这时,error code 应当是 3。

重复性方位更新恳求

时分,仅获取一次用户方位信息是不行的。比方用户正在移动,跟着用户的移动,页面应当可以不断更新显现邻近的饭馆信息,这么,所显现的饭馆信息才对用户有

含义。走运的是,HTML5 Geolocation 效劳的设计者现已考虑到了这一点,运用程序可以运用如下 API

进行重复性方位更新恳求,当监控到用户的方位发作改动时,HTML5 Geolocation 效劳就会从头获取用户的方位信息,并调用

updateLocation() 函数处理新的数据,及时通知用户。

清单 6. 重复性方位更新恳求 API

void watchPosition(updateLocation, optional

handleLocationError, optional options);

这个函数的参数跟前面说到的 getCurrentPosition

函数的参数一样,不再累赘介绍。

关闭更新也很简略,假如运用程序不需求再接纳用户的方位更新音讯,只需求运用 clearWatch()

函数。参照清单 7 给的比如。

清单 7. watchPosition 和 clearWatch 的运用

var watchId =

navigator.geolocation.watchPosition(updateLocation, handleLocationError);

// 依据继续更新的方位信息完成一些功用…

// 中止接纳方位更新音讯

navigator.geolocation.clearWatch(watchId);

构建有用运用

本节将介绍怎么用刚刚介绍的“重复性方位更新恳求”构建一个简略有用的 Web

运用程序:间隔盯梢器。经过此运用程序可以了解到 HTML5 Geolocation API 的强壮的当地。

想 要快速确定在必定时刻内的行走间隔,一般但是运用 GPS 导航系统或计步器这么的专业设备。依据

HTML5 Geolocation

供给的强壮效劳,咱们可以自个创立一个页面来盯梢从页面被加载的当地到现在地点方位所经过的间隔。尽管它在台式机上不大有用,可在手机上运转时十分抱负

的。只要在手机浏览器中翻开这个示例页面并授予其方位拜访的权限,每隔几秒钟,运用程序就会更新核算走过的间隔。如图 2 所示。

图 2. HTML5 Geolocation 示例运用程序在 Moto ME525

上的运转界面

在 此实例中运用的 watchPosition()

函数刚刚在上一节中介绍过。每当有新的方位回来,就将其与上次保留的方位进行对比以核算间隔。间隔核算运用闻名的 Haversine

公式来完成,这个公式可以依据经纬度核算地球上两点间的间隔。它的 javascript 完成如清单 8 所示:

清单 8. Haversine 公式的 JavaScript 完成

function toRadians(degree) {

return this * Math.PI / 180;

}

function distance(latitude1, longitude1,

latitude2, longitude2) {

// 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;

}

其间 distance()

函数用来核算两个经纬度表明的方位间的间隔,咱们可以定时检查用户的方位,并调用这个函数来得到用户的近似移动间隔。这里有一个假定,即用户在每个区间上都是直线移动的。

显现不精确的方位信息会给用户供给误导,给用户以极端坏的形象,以为咱们的运用程序不可靠,咱们应当尽量防止。因而,咱们将经过

position.coords.accuracy 过滤掉一切低精度的方位更新数据。如清单 9 所示:

清单 9. 过滤不精确的方位更新数据

// 假如 accuracy 的值太大,咱们以为它不精确,不用它核算间隔

if (accuracy >= 500) {

updateStatus("这个数据太不靠谱,需求更精确的数据来核算本次移动间隔。");

return;

}

最终,咱们来核算移动间隔。假定前面现已最少收到了一个精确的方位,咱们将更新移动的总间隔并显现给用户,一起还存储当时数据以备后边的对比。代码如清单

10 所示:

清单 10. 核算移动间隔

// 核算移动间隔

if ((lastLat != null) && (lastLong !=

null)) {

var currentDistance = distance(latitude,

longitude, lastLat, lastLong);

document.getElementById("本次移动间隔").innerHTML =

"本次移动间隔:" + currentDistance.toFixed(4) + "

千米";

totalDistance += currentDistance;

document.getElementById("总计移动间隔").innerHTML =

"总计移动间隔:" + currentDistance.toFixed(4) + "

千米";

}

lastLat = latitude;

lastLong = longitude;

updateStatus("核算移动间隔成功。");

}

至此,这篇文章现已给出了该示例的一切基地代码(完好代码请从附件中下载)。用这么简略的不到 150

行的 HTML 和脚本代码,咱们就构建了一个可以继续监控用户方位改动的示例运用程序,简直完好地演示了 Geolocation API

的运用。不妨把它放到您支撑地舆方位定位的手机或移动设备上,看看您一天大约能走多少路吧,这是不是很风趣呢?

结束语

本 文介绍了 HTML5 供给的新功用

Geolocation,叙述了方位信息的构成:纬度、经度和精确度等,以及它们的获取路径。这篇文章还介绍了 HTML5 Geolocation

引起的隐私疑问,最终演示怎么把这个新功用添加到您的运用程序中,它特别适合在移动设备如手机上运转。

下载: code

参考资料 学习

HTML5 中的新元素 (developerWorks)讨论了 HTML 5 规范内的许多 UI

特性中的一些。

W3C HTML 5 Specification 是有关 HTML 5 的威望资本。

HTML5 教程 来自 w3school ,叙述 HTML5 中的新特性。

Marakana HTML5 Tutorial ,叙述 HTML5 中的 Geolocation

特性。

HTML5 中文手册 ,介绍 HTML5 的标签,规范特点和事情特点。

HTML5 China ,我国领先的 HTML5 技术门户。

HTML5 研讨小组 ,致力于 HTML5 在我国的开展与运用。

检查 HTML5 专题 ,了解更多和 HTML5 有关的常识和意向。

developerWorks Web development 专区 :经过专门对于 Web

技术的文章和教程,扩展您在网站开发方面的技术。

developerWorks Ajax 资本基地 :这是有关 Ajax

编程模型信息的一站式基地,包含许多文档、教程、论坛、blog、wiki 和新闻。任何 Ajax 的新信息都能在这里找到。

developerWorks Web 2.0 资本基地 ,这是有关 Web 2.0

有关信息的一站式基地,包含很多 Web 2.0 技术文章、教程、下载和有关技术资本。您还可以经过 Web 2.0 新手入门 节目,敏捷了解 Web 2.0

的有关概念。

谈论

参加 developerWorks 中文社区 。检查开发人员推进的博客、论坛、组和维基,并与别的

developerWorks 用户沟通。

优质IT资源分享社区为你提供此文。

本站有大量优质html5 css js等web前端开发教程视频,资料等资源,包含html5 css js 前端开发框架等基础教程,高级进阶教程等等,教程视频资源涵盖传智播客,极客学院,达内,北大青鸟,猎豹网校等等IT职业培训机构的培训教学视频,价值巨大。欢迎点击下方链接查看。

WEB前端开发教程视频

优质IT资源分享社区(www.itziyuan.top)
一个免费,自由,开放,共享,平等,互助的优质IT资源分享网站。
专注免费分享各大IT培训机构最新培训教学视频,为你的IT学习助力!

!!!回帖受限制请看点击这里!!!
!!!资源失效请在此版块发帖说明!!!

[PS:按 CTRL+D收藏本站网址~]

——“优质IT资源分享社区”管理员专用签名~

本版相似帖子

游客