突击HTML5之Javascript API拓展2—自然地理信息内容服

日期:2020-09-17 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

如今较为火的1类服务叫做根据部位的服务(location-based service, LBS),这1类服务便是公司运用某点(比如客户所属的部位)座标周边的地区出示服务的信息内容,例如普遍的地形图有关服务。在HTML5中,添加了新的自然地理部位API用来明确和共享自然地理部位。
隐私保护声明
在与远程控制Web服务器共享资源物理学部位时,隐私保护是1个必须关心的难题。因而,自然地理部位API会规定客户先出示管理权限,随后Web运用程序流程才可以浏览部位信息内容。初次浏览恳求自然地理部位数据信息的网页页面时,访问器将显示信息1个通告栏,提醒出示对客户部位的浏览管理权限。依照访问器的提醒,挑选有关的受权便可。
假如客户未授于管理权限,则不容易向 Web 运用程序流程出示部位信息内容。启用有关API不容易开启取得成功回调函数。
查验访问器的适用状况
自然地理部位API在流行的访问器的全新版中都适用了,可是以便适配老的访问器,還是要查验1下。假如自然地理部位 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这1全局性目标的1个新特性:navigator.geolocation,该目标出示了1些有关浏览者的访问器和系统软件的有效信息内容。Geolocation的信息内容能够根据很多方式得到:例如基站、web的数据信息库或是GPS等。应用不一样的方法获得到的Geolocation信息内容精度也是不1样的,一般状况下,根据GPS得到的最为精确(挪动服务平台上应用GPS数最多,PC服务平台上基础全是靠互联网数据信息)。不经意状况下,在1些部位上,你有将会不可以得到确立的自然地理部位读数或是1点数据信息都接受不到。
精准定位当今部位
  应用navigator.geolocation的getCurrentPosition()方式获得客户确当前部位,这个方式只获得1次部位的信息内容。当该方式被脚本制作启用时,方式以多线程的方法来尝试获得寄主机器设备确当前部位。

拷贝编码
编码以下:

方式签字:getCurrentPosition(geolocationSuccessCallback,[geolocationErrorCallback,geolocationOptions]);
  1. geolocationSuccessCallback:获得当今部位取得成功后的回调函数(必须的)
  2. geolocationErrorCallback. 有不正确产生时应用的回调函数(可选的)
  3. geolocationOptions. 自然地理部位选项(可选的)

解决部位信息内容
getCurrentPositon()方式得到当今部位取得成功后会将部位信息内容储存到1个Position目标中,随后把这个目标做为主要参数来实行geolocationSuccessCallback这1回调函数。在这个回调函数涵数中,你能够随意处理这个目标中包括的信息内容。
Position目标有两个特性:timestamp和coords。timestamp特性表明自然地理部位数据信息的建立時间,coords特性表明自然地理部位信息内容,又包括7个特性:

拷贝编码
编码以下:

. coords.latitude:估算纬度
. coords.longitude:估算经度
. coords.altitude:估算高宽比
. coords.accuracy:所出示的以米为企业的经度和纬度估算的精准度
. coords.altitudeAccuracy:所出示的以米为企业的高宽比估算的精准度
. coords.heading: 寄主机器设备当今挪动的角度方位,相对正北方地区向顺时针测算
. coords.speed:以米每秒为企业的机器设备确当前对地速率

1般的,这些特性中有3项是确保有的:coords.latitude、coords.longitude和coords.accuracy,其余的回到null;这取决于机器设备的工作能力和其所选用的后端开发精准定位服务器。并且,heading和speed特性能够根据客户以前的部位测算出来。
解决不正确
实行getCurrentPositon()方式时假如有不正确产生的话,则该方式传送1个PositionError目标给geolocationErrorCallback回调函数。
设定自然地理部位选项
你能够设定geolocationOptions的3个特性:

拷贝编码
编码以下:

enableHighAccuracy:假如机器设备适用高精度的话,这个选项表明是不是开启高精度。
timeout:查寻请求超时時间
maximumAge: 缓存文件的部位最大的時间数,在这1時间段内缓存文件可被应用。

看下面详细的事例:

拷贝编码
编码以下:

<!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);
}
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='"+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()方式能够按时轮询客户的部位,查询客户的部位是不是产生更改。这个方式有3个主要参数:这3个主要参数和getCurrentPosition()方式1样,1个取得成功后的回调函数,1个不成功后的回调函数,和1个获得部位信息内容的选项;这个方式有1个回到值watchID,用于撤销不断精准定位。
应用navigator.geolocation的clearWatch()方式能够停止正在开展的watchPosition(),该方式只带1个主要参数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">
function setText(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);
}
else {
alert("geolocation not supported");
}
}
else {
alert("Navigator not found");
}
}
function clearWatch(watchID) {
window.navigator.geolocation.clearWatch(watchID);
}
function successCallback(position)
{
setText(position.coords.latitude, "latitude");
setText(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>

好用参照:
官方文本文档:http://www.w3schools.com/html5/html5_geolocation.asp
脚本制作之家:https://www.jb51.net/w3school/html5/
微软协助:http://msdn.microsoft.com/zh-cn/library/gg589502(v=vs.85)
百度搜索地形图API:http://dev.baidu.com/wiki/static/index.htm