0

0

突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习_html5教程技巧

php中文网

php中文网

发布时间:2016-05-16 15:50:02

|

1876人浏览过

|

来源于php中文网

原创

现在比较火的一类服务叫做基于位置的服务(location-based service, LBS),这一类服务就是企业利用某点(例如用户所在的位置)坐标附近的区域提供服务的信息,比如常见的地图相关服务。在HTML5中,加入了新的地理位置API用来确定和分享地理位置。
隐私申明
在与远程Web服务器共享物理位置时,隐私是一个需要关注的问题。因此,地理位置API会要求用户先提供权限,然后Web应用程序才能访问位置信息。首次访问请求地理位置数据的网页时,浏览器将显示一个通知栏,提示提供对用户位置的访问权限。按照浏览器的提示,选择相关的授权即可。
如果用户未授予权限,则不会向 Web 应用程序提供位置信息。调用相关API不会触发成功回调。
检查浏览器的支持情况
地理位置API在主流的浏览器的最新版中都支持了,但是为了兼容老的浏览器,还是要检查一下。如果地理位置 API 不可用,则 window.navigator.geolocation 将为 null,如下所示:

Adrenaline
Adrenaline

软件调试助手,识别和修复代码中错误

下载
复制代码
代码如下:

function show_islocationenabled()
{
var str = "No, geolocation is not supported.";
if (window.navigator.geolocation) {
str = "Yes, geolocation is supported.";
}
alert( str );
}

Geolocation API基于navigator这一全局对象的一个新属性:navigator.geolocation,该对象提供了一些关于访问者的浏览器和系统的有用信息。Geolocation的信息可以通过许多手段获得:比如基站、web的数据库或是GPS等。使用不同的方式获取到的Geolocation信息精度也是不一样的,通常情况下,通过GPS获得的最为准确(移动平台上使用GPS最多,PC平台上基本都是靠网络数据)。偶然情况下,在一些位置上,你有可能不能获得明确的地理位置读数或是一点数据都接收不到。
定位当前位置
  使用navigator.geolocation的getCurrentPosition()方法获取用户的当前位置,这个方法只获取一次位置的信息。当该方法被脚本调用时,方法以异步的方式来尝试获取宿主设备的当前位置。

复制代码
代码如下:

方法签名:getCurrentPosition(geolocationSuccessCallback,[geolocationErrorCallback,geolocationOptions]);
  1. geolocationSuccessCallback:获取当前位置成功后的回调(必需的)
  2. geolocationErrorCallback. 有错误发生时使用的回调(可选的)
  3. geolocationOptions. 地理位置选项(可选的)

处理位置信息
getCurrentPositon()方法获得当前位置成功后会将位置信息保存到一个Position对象中,然后把这个对象作为参数来执行geolocationSuccessCallback这一回调。在这个回调函数中,你可以任意处置这个对象中包含的信息。
Position对象有两个属性:timestamp和coords。timestamp属性表示地理位置数据的创建时间,coords属性表示地理位置信息,又包含七个属性:

复制代码
代码如下:

. coords.latitude:估计纬度
. coords.longitude:估计经度
. coords.altitude:估计高度
. coords.accuracy:所提供的以米为单位的经度和纬度估计的精确度
. coords.altitudeAccuracy:所提供的以米为单位的高度估计的精确度
. coords.heading: 宿主设备当前移动的角度方向,相对于正北方向顺时针计算
. coords.speed:以米每秒为单位的设备的当前对地速度

一般的,这些属性中有三项是保证有的:coords.latitude、coords.longitude和coords.accuracy,其余的返回null;这取决于设备的能力和其所采用的后端定位服务器。而且,heading和speed属性可以基于用户之前的位置计算出来。
处理错误
执行getCurrentPositon()方法时如果有错误发生的话,则该方法传递一个PositionError对象给geolocationErrorCallback回调。
设置地理位置选项
你可以设置geolocationOptions的三个属性:

复制代码
代码如下:

enableHighAccuracy:如果设备支持高精度的话,这个选项表示是否启用高精度。
timeout:查询超时时间
maximumAge: 缓存的位置最大的时间数,在这一时间段内缓存可被使用。

看下面完整的例子:

复制代码
代码如下:




Click the button to get your position:








这个例子获取到当前设备所在的地理位置并显示到Google地图中。当然你可以使用百度地图API中的静态图版来改造这个例子。百度地图API参看后面的实用参考中的链接。
开启/取消持续定位
使用navigator.geolocation的watchPosition()方法可以定期轮询用户的位置,查看用户的位置是否发生改变。这个方法有三个参数:这三个参数和getCurrentPosition()方法一样,一个成功后的回调,一个失败后的回调,和一个获取位置信息的选项;这个方法有一个返回值watchID,用于取消持续定位。
使用navigator.geolocation的clearWatch()方法可以终止正在进行的watchPosition(),该方法只带一个参数watchID。
看下面的例子:

复制代码
代码如下:




Geolocation API Example: Listening for Location Updates













实用参考:
官方文档:http://www.w3schools.com/html5/html5_geolocation.asp
本站:http://www.jb51.net/w3school/html5/
微软帮助:http://msdn.microsoft.com/zh-cn/library/gg589502(v=vs.85)
百度地图API:http://dev.baidu.com/wiki/static/index.htm

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
c++ 根号
c++ 根号

本专题整合了c++根号相关教程,阅读专题下面的文章了解更多详细内容。

22

2026.01.23

c++空格相关教程合集
c++空格相关教程合集

本专题整合了c++空格相关教程,阅读专题下面的文章了解更多详细内容。

24

2026.01.23

yy漫画官方登录入口地址合集
yy漫画官方登录入口地址合集

本专题整合了yy漫画入口相关合集,阅读专题下面的文章了解更多详细内容。

99

2026.01.23

漫蛙最新入口地址汇总2026
漫蛙最新入口地址汇总2026

本专题整合了漫蛙最新入口地址大全,阅读专题下面的文章了解更多详细内容。

132

2026.01.23

C++ 高级模板编程与元编程
C++ 高级模板编程与元编程

本专题深入讲解 C++ 中的高级模板编程与元编程技术,涵盖模板特化、SFINAE、模板递归、类型萃取、编译时常量与计算、C++17 的折叠表达式与变长模板参数等。通过多个实际示例,帮助开发者掌握 如何利用 C++ 模板机制编写高效、可扩展的通用代码,并提升代码的灵活性与性能。

15

2026.01.23

php远程文件教程合集
php远程文件教程合集

本专题整合了php远程文件相关教程,阅读专题下面的文章了解更多详细内容。

65

2026.01.22

PHP后端开发相关内容汇总
PHP后端开发相关内容汇总

本专题整合了PHP后端开发相关内容,阅读专题下面的文章了解更多详细内容。

61

2026.01.22

php会话教程合集
php会话教程合集

本专题整合了php会话教程相关合集,阅读专题下面的文章了解更多详细内容。

63

2026.01.22

宝塔PHP8.4相关教程汇总
宝塔PHP8.4相关教程汇总

本专题整合了宝塔PHP8.4相关教程,阅读专题下面的文章了解更多详细内容。

33

2026.01.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Django 教程
Django 教程

共28课时 | 3.4万人学习

SciPy 教程
SciPy 教程

共10课时 | 1.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号