加入收藏 | 设为首页 | 会员中心 | 我要投稿 湖南网 (https://www.hunanwang.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 编程 > 正文

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

发布时间:2020-11-28 21:55:15 所属栏目:编程 来源:网络整理
导读:在HTML5中,插手了新的地理位置API用来确定和分享地理位置。这一类处事就是企业操作某点(譬喻用户地址的位置)坐标四面的地区提供处事的信息,好比常见的舆图相干
副问题[/!--empirenews.page--] 此刻较量火的一类处事叫做基于位置的处事(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>Click the button to get your position:</p>
<button>Try It</button>
<div></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='"http://www.jb51.net/html5/+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。
看下面的例子:

复制代码

代码如下:

(编辑:湖南网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读