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>

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>

<脚本type =“ text / javascript”>

函数setText（val，e）{

document.getElementById（e）.value = val;

}

var nav = null;