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


Posted in HTML / CSS onJanuary 31, 2013

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

复制代码
代码如下:

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: 缓存的位置最大的时间数,在这一时间段内缓存可被使用。

看下面完整的例子:
复制代码
代码如下:

<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to get your position:</p>
<button onclick="getLocation()">Try It</button>
<div id="mapholder"></div>
<script>
var x=document.getElementById("demo");
function getLocation() {
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else{
x.innerHTML="Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
var latlon=position.coords.latitude+","+position.coords.longitude;
var img_url="http://maps.googleapis.com/maps/api/staticmap?center=" +
latlon + "&zoom=9&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="<img src='"+img_url+"' />";
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML="User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML="The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="An unknown error occurred."
break;
}
}
</script>
</body>
</html>

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

<!DOCTYPE html>
<html>
<head>
<title>Geolocation API Example: Listening for Location Updates</title>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<script type="text/javascript">
function setText(val, e) {
document.getElementById(e).value = val;
}
var nav = null;
var watchID;
function listenForPositionUpdates() {
if (nav == null) {
nav = window.navigator;
}
if (nav != null) {
var geoloc = nav.geolocation;
if (geoloc != null) {
watchID = geoloc.watchPosition(successCallback);
}
else {
alert("geolocation not supported");
}
}
else {
alert("Navigator not found");
}
}
function clearWatch(watchID) {
window.navigator.geolocation.clearWatch(watchID);
}
function successCallback(position)
{
setText(position.coords.latitude, "latitude");
setText(position.coords.longitude, "longitude");
}
</script>
</head>
<body>
<label for="latitude">Latitude: </label><input id="latitude" />

<label for="longitude">Longitude: </label><input id="longitude" />

<input type="button" value="Watch Latitude and Longitude" onclick="listenForPositionUpdates()" />
<input type="button" value="Clear watch" onclick="clearWatch()" />
</body>
</html>


实用参考:
官方文档:http://www.w3schools.com/html5/html5_geolocation.asp
三水点靠木:https://3water.com/w3school/html5/
微软帮助:http://msdn.microsoft.com/zh-cn/library/gg589502(v=vs.85)
百度地图API:http://dev.baidu.com/wiki/static/index.htm
HTML / CSS 相关文章推荐
css3学习之2D转换功能详解
Dec 23 HTML / CSS
CSS3伪类选择器:nth-child()
Apr 02 HTML / CSS
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
Aug 08 HTML / CSS
CSS3简单实现照片墙
Dec 12 HTML / CSS
浅析与CSS3的loading动画加载相关的transition优化
May 18 HTML / CSS
详解CSS3中强大的filter(滤镜)属性
Jun 29 HTML / CSS
使用CSS变量实现炫酷惊人的悬浮效果
Apr 26 HTML / CSS
CSS3 rgb and rgba(透明色)的使用详解
Sep 25 HTML / CSS
HTML5表格_动力节点Java学院整理
Jul 11 HTML / CSS
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
Jul 18 HTML / CSS
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
Apr 07 HTML / CSS
CSS3 实现NES游戏机的示例代码
Apr 21 HTML / CSS
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
Jan 31 #HTML / CSS
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
Jan 30 #HTML / CSS
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
Jan 30 #HTML / CSS
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
Jan 30 #HTML / CSS
HTML5之SVG 2D入门10—滤镜的定义及使用
Jan 30 #HTML / CSS
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
Jan 30 #HTML / CSS
HTML5之SVG 2D入门8—文档结构及相关元素总结
Jan 30 #HTML / CSS
You might like
PHP网页游戏学习之Xnova(ogame)源码解读(十五)
2014/06/30 PHP
Yii2实现让关联字段支持搜索功能的方法
2016/08/10 PHP
PHP中字符串长度的截取用法示例
2017/01/12 PHP
php实现的mongoDB单例模式操作类
2018/01/20 PHP
使用PHPExcel导出Excel表
2018/09/08 PHP
laravel5使用freetds连接sql server的方法
2018/12/07 PHP
Bootstrap模仿起筷首页效果
2016/05/09 Javascript
Javascript 正则表达式校验数字的简单实例
2016/11/02 Javascript
JavaScript截屏功能的实现代码
2017/07/28 Javascript
详解AngularJS之$window窗口对象
2018/01/17 Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
2018/04/12 jQuery
详解ng-alain动态表单SF表单项设置必填和正则校验
2019/06/11 Javascript
VUE注册全局组件和局部组件过程解析
2019/10/10 Javascript
JavaScript实现轮播图片完整代码
2020/03/07 Javascript
Python3基础之条件与循环控制实例解析
2014/08/13 Python
python读取文本绘制动态速度曲线
2018/06/21 Python
Python装饰器模式定义与用法分析
2018/08/06 Python
Python一句代码实现找出所有水仙花数的方法
2018/11/13 Python
Pandas读取并修改excel的示例代码
2019/02/17 Python
python3 webp转gif格式的实现示例
2019/12/10 Python
python中if及if-else如何使用
2020/06/02 Python
python 如何引入协程和原理分析
2020/11/30 Python
HTML5 transform三维立方体实现360无死角三维旋转效果
2014/08/22 HTML / CSS
详解canvas.toDataURL()报错的解决方案全都在这了
2020/03/31 HTML / CSS
英国汽车座椅和婴儿车购物网站:Uber Kids
2017/04/19 全球购物
高品质和独特的产品世界:Creations and Collections
2018/01/07 全球购物
阿巴庭院:Abba Patio
2019/06/18 全球购物
以实惠的价格轻松租车,免费取消:Easyrentcars
2019/07/16 全球购物
沃尔玛加拿大:Walmart.ca
2020/03/02 全球购物
Linux如何命名文件--使用文件名时应注意
2012/01/22 面试题
Java程序员面试题
2013/07/15 面试题
计算机专业毕业生的自我评价
2013/11/18 职场文书
化学教育专业自荐信
2014/07/04 职场文书
如何在Python项目中引入日志
2021/05/31 Python
Vue的过滤器你真了解吗
2022/02/24 Vue.js
python_tkinter弹出对话框创建
2022/03/20 Python