现在比较火的一类服务叫做基于位置的服务(location-bad rvice, 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);
}
el{
x.innerhtml=”geolocation is not supported by this browr.”;
}
}
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=400×300&nsor=fal”;
document.getelementbyid(“mapholder”).innerhtml=”<img src='”+img_url+”‘ />”;
}
function showerror(error) {
switch(error.code) {
ca error.permission_denied:
x.innerhtml=”ur denied the request for geolocation.”
break;
ca error.position_unavailable:
x.innerhtml=”location information is unavailable.”
break;
ca error.timeout:
x.innerhtml=”the request to get ur location timed out.”
break;
ca 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”>
fu五游精选nction ttext(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);
}
el {
alert(“geolocation not supported”);
}
}
el {
alert(“navigator not found”);
}
}
function clearwatch(watchid) {
window.navigator.geolocation.clearwatch(watchid);
}
function successcallback(position)
{
ttext(position.coords.latitude, “latitude”);
ttext(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>
实用参考:
官方文档:
www.887551.com:
微软帮助:)
百度地图api:
本文发布于:2023-04-03 06:05:56,感谢您对本站的认可!
本文链接:https://www.wtabcd.cn/fanwen/zuowen/8fc114cdc7dee8082ba0470608263d0f.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文word下载地址:突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习.doc
本文 PDF 下载地址:突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习.pdf
留言与评论(共有 0 条评论) |