HTML5怎么实现Javascript API扩展

HTML5怎么实现Javascript API扩展

本篇内容主要讲解“HTML5怎么实现Javascript API扩展”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“HTML5怎么实现Javascript API扩展”吧!

现在比较火的一类服务称为基于位置的服务(基于位置的服务,LBS),这一类服务就是企业利用某点(例如用户所在的位置)相关服务。在HTML5中,加入了新的地理位置API用来确定和分享地理位置。

HTML5怎么实现Javascript 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>

到此,相信大家对“HTML5怎么实现Javascript API扩展”有了更深的了解,不妨来实际操作一番吧!这里是恰卡编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

发布于 2022-03-09 22:51:51
收藏
分享
海报
0 条评论
22
上一篇:IE6\7\8不支持html5标签怎么解决 下一篇:HTML5中怎么使用网络存储存储键值对的数据
目录

    0 条评论

    本站已关闭游客评论,请登录或者注册后再评论吧~

    忘记密码?

    图形验证码