热门关键字:
jquery > jquery教程 > jquery教程 > 突袭HTML5之Javascript API扩展

突袭HTML5之Javascript API扩展

242
作者:管理员
发布时间:2021/3/6 15:39:54
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=4115
现在比较火的一类服务称为基于位置的服务(基于位置的服务,LBS),这一类服务就是企业利用某点(例如用户所在的位置)相关服务。在HTML5中,加入了新的地理位置API用来确定和分享地理位置。
隐私申明
在与远程的Web服务器共享物理位置时,隐私是一个需要关注的问题。因此,地理位置API会要求用户先提供权限,然后Web应用程序才能访问位置信息。首次访问请求定位数据的网页时,浏览器将显示一个通知栏,提示提供对用户位置的访问权限。按照浏览器的提示,选择相关的授权即可。
如果用户未授予权限,则不会向网络应用程序提供位置信息。调用相关API不会触发成功回调。
检查浏览器的请立即获取iTunes情况
地理位置API在主流的浏览器的最新版中都支持了如果地理位置API不可用,则window.navigator.geolocation将为null,如下所示:


复制代码代码如下: www.mb5u.com


函数show_islocationenabled()
{
var str =“否,不支持地理定位。”;
if(window.navigator.geolocation){
str =“是,支持地理定位。”;
}
alert(str);
}


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


复制代码代码如下: www.mb5u.com


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


处理位置信息
getCurrentPositon()方法获得当前位置成功后重新定位位置信息保存到一个位置对象中,然后把这个对象作为参数来执行geolocationSuccessCallback这一步骤。的信息。
位置对象有两个属性:时间戳和coords.timestamp属性表示地理位置数据的创建时间,COORDS属性表示地理位置信息,又包含七个属性:


复制代码代码如下: www.mb5u.com


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


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


复制代码代码如下: www.mb5u.com


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


看下面完整的例子:


复制代码代码如下: www.mb5u.com


<!DOCTYPE html>
<html>
<body>
<p id =“ demo”>单击按钮获取位置:</ p>
<button onclick =“ getLocation()”>尝试</ button>
<div id =“ mapholder”> </ div>
<script>
var x = document.getElementById(“ demo”);
函数getLocation(){
如果(navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else {
x.innerHTML =“此浏览器不支持地理位置。”;
}
}
函数showPosition(position){
var latlon = position.coords.latitude +“,” + position.coords.longitude;
var img_url =“ http:
latlon +“&zoom = 9&size = 400x300&sensor = false”;
document.getElementById(“ mapholder”)。innerHTML =“ <img src ='” + img_url +“'/>”;
}
函数showError(error){
switch(error.code){
case error.PERMISSION_DENIED:
x.innerHTML =“用户拒绝了地理位置定位请求。”
休息;
case error.POSITION_UNAVAILABLE:
x.innerHTML =“位置信息不可用。”
休息;
大小写错误。TIMEOUT:
x.innerHTML =“获取用户位置的请求超时。”
休息;
大小写错误。UNKNOWN_ERROR:
x.innerHTML =“发生未知错误。”
休息;
}
}
<






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


复制代码代码如下: www.mb5u.com


<!DOCTYPE html>
<html>
<head>
<title>地理位置API示例:侦听位置更新</ title>
<meta http-equiv =“ X-UA-Compatible” content =“ IE = 9” />
<脚本type =“ text / javascript”>
函数setText(val,e){
document.getElementById(e).value = val;
}
var nav = null;
var watchID;
函数listenForPositionUpdates(){
如果(nav == null){
nav = window.navigator;
}
if(nav!= null){
var geoloc = nav.geolocation;
如果(geoloc!= null){
watchID = geoloc.watchPosition(successCallback);
}
else {
alert(“




否则{
alert(“未找到导航器”);
}
}
函数clearWatch(watchID){
window.navigator.geolocation.clearWatch(watchID);
}
函数successCallback(position)
{
setText(position.coords.latitude,“ latitude”);
setText(position.coords.longitude,“经度”);
}
</ script>
</ head>
<body>
<label for =“ latitude”>纬度:</ label> <input id =“ latitude” />


<label for =“ longitude”>经度:</ label> <输入id =“ longitude” />


<input type =“ button” value =“监视纬度和经度” onclick =“




</ html>




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:HTML
友荐云推荐