新普金娱乐网址


GNSS数据下载网站

Echarts数据可视化grid直角坐标系(xAxis、yAxis)

【温故而知新-Javascript】使用地理定位

  • 三月 11, 2019
  • 地理
  • 没有评论

地理定位(Geolocation)API让我们得以获得用户近来地理地点的信息(可能至少是正在运作浏览器的类别的职分)。它不是HTML5专业的一片段,但日常被归组到与HTML5有关的新成效中。

文/蔚小亓

1.
利用地理定位

我明日正在三个婚礼的会场,婚礼的男主人是自作者的邻里表弟,而站在她身边的是本人的三个老师。婚礼现场的街坊四弟,流露了自作者一直没有看见过的笑容,老师也是一致笑颜如花。

我们通过全局属性 navigator.geolocation 访问地理定位功能,它会回去一个Geolocation对象。

说起这一个邻居四哥,据小编所知他在和自家的民办教授在同步前一起谈过两场恋爱。至于和先生在一块,是偶合,也是迟早。而作者,在她们四个人里面,总是有起到哪边效能。

图片 1

他的第③回结婚恋爱是在她读高中的时候。和她一道的不行女孩是他的同班同学。她长得特别赏心悦目,皮肤白白的,头发黑黑的、长长的,就如小说里面包车型地铁女二号这样。

 

据他说,那一天中午放学后她在学堂操场跑步,才跑了一圈不到,女孩就爆冷走出来挡在她的前面,十一分悍然地说:‘‘周泽文,小编欢畅你,笔者要和您在协同!”说完,脸就爆冷门红了四起。

获取当前职分

她其实一初步并没有对那几个女孩有啥样越发的想法,也远非想过要早恋,但见到他说完那句话后脸红时却突然觉得她很可喜,于是就点了点头。

顾名思义,getCurrentPosition方法能获得当前的地点,然则地点消息不是由函数自个儿再次回到的。大家须要提供2个中标的回调函数,它会在职位消息可用时接触(那样做考虑到了请求地点和消息变得可用之间只怕会有延迟)。下边的言传身教显示了如何采纳这一个格局赢得地方信息:

街坊小弟跟这些女孩就像是此在同步了。即使她们名义上是朋友,可是他们也从没像其余朋友那样整天腻在一起,只是会时不时一起跑步,一起用餐,一起谈论笑笑。但是不知晓怎么,那件事还是让名师给知道了。于是,像拥有的高校爱情旧事那样,男孩和女孩不得不分开。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取当前位置</title>
    <style type="text/css">
        table {border-collapse: collapse;}
        th,td {padding: 4px;}
        th {text-align: right;}
    </style>
</head>
<body>
<table border="1">
    <tr>
        <th>Longitude:</th><td id="longitude">-</td>
        <th>Latitude:</th><td id="latitude">-</td>
    </tr>
    <tr>
        <th>Altitude:</th><td id="altitude">-</td>
        <th>Accuracy:</th><td id="accuracy">-</td>
    </tr>
    <tr>
        <th>Altitude Accuracy:</th><td id="altitudeAccuracy">-</td>
        <th>Heading:</th><td id="heading">-</td>
    </tr>
    <tr>
        <th>Speed:</th><td id="speed">-</td>
        <th>Time Stamp:</th><td id="timestamp">-</td>
    </tr>
</table>
<script type="application/javascript">
    navigator.geolocation.getCurrentPosition(displayPosition);
    function displayPosition(pos){
        var propertis = ["longitude","latitude","altitude","accuracy",
            "altitudeAccuracy","heading","speed"];
        for(var i=0;i<propertis.length;i++){
            var value = pos.coords[propertis[i]];
            document.getElementById(propertis[i]).innerHTML = value;
        }
        document.getElementById("timestamp").innerHTML = pos.timestamp;
    }
</script>
</body>
</html>

女孩的二老因为担心她们再三再四在同二个该校会纠缠不清,就给女孩办了转学手续。他就像此无缘无故地终结了友好的初恋。他强迫自个儿把思想重新放回学习上,只是不再习惯在放学后去跑步。

本条例子中的脚本调用了getCurrentPosition,并传递displayPosition函数作为该方法的参数。当地点信息变得可用时,浏览器就会调用钦点函数,并传播三个提供岗位详情的Position对象。Position对象卓殊简单,如下表所示:

第三场恋爱,距离他跟他分手已经有四年了。因为上一回的恋爱让她心中受了伤,以至于他漫长不乐意再谈恋爱。直到,他碰着第四个女孩。

 图片 2

她读大三时,女孩才刚高级中学毕业。新生报到那天,一些老生就在高校当起志愿者,为部分刚到校的新生带路。他和他正是那样认识的。

咱俩实在感兴趣的是Coordinates
对象,它由Position.coords属性重回。下表介绍了Coordinates对象的本性:

那天女孩贰个姿首刚刚走进大学的校门,站在校门口的他就急不可待地走过去接过她手中最大的相当行李箱。他一句话也不说,带他去报到、找宿舍和办一些新兴要办的步调。结果他们就这么认识,三个月后她们在一道了。

图片 3

她俩多个人在联名,同样是女孩告的白,捅破那层窗户纸。女孩说,她从开学那天就欣赏上他了。

不是颇具Coordinates对象的数据值都时刻可用。浏览器获取地方音信的体制尚未统一的明确,所选取的技巧也有很多。移动设备越来越多地布局了GPS、加速度计和电子罗盘设备,那就代表那多少个平台具有最精确和最完全的数目。

其一女孩没有那么雅观,相反的,她的皮肤有点黑,头发也绝非那么长,个子也远非那么高。但是啊,他看看他告白时,却觉得她是那么的喜人,那样单纯。于是,他允诺了。

大家还可以为别的装备获得地点新闻:浏览器选取的一种地理定位服务会尝试依照网络新闻分明地方。假设您的种类里有Wi-Fi适配器,那么信号范围内的网络就会与一份互连网目录进行相比,那份目录是街道级景色调查(如谷歌(谷歌(Google))街景服务)结果的一有个别。假若没有Wi-Fi,也得以用ISP所提供的IP地址得到大概的职位。

大学时代谈恋爱父母也就不再反对,他们是美好正大的在一块儿,心绪也直接很好。可是那天啊,它总有不测风浪!

那东西实在很可怕,所以当文书档案使用地理定位功效时,全体浏览器会做的率先件事正是摸底用户是不是对其授权,从下图能够看到IE浏览器是什么做的:

女孩家里穷,从报到那天起他就径直在做专职。在协同的时候平时她出来上班他总会送他去到办事的地点,看到他安然到达才离开。不过她读大四那年开首,就要到二个单位上见习,没有章程每一天送她上下班。意外便是在这么十一分无法的气象下发出的。

图片 4

女孩在一天夜里下班回家的旅途,被一辆闯红灯的电瓶车撞倒了。电瓶车撞到人后逃匿了,等到他来到卫生院看见他的时候,她曾经不在了。

假定用户同意此呼吁,浏览器就能博得地方音信,并在新闻可用时调用回调函数。下图是台式机里IE浏览器展现的意义:

邻里表哥请假回了家,那是本人首先次见到他流眼泪。无论是她前头因为早恋被二姨打时,如故她和女孩被迫分开,小编都没见过他挥泪。

图片 5

休息一星期后,邻居二弟回母校了。据悉他毕业后并未当即找工作,而是再考上了此外的院所——警校。因为撞死女孩的不胜司机还没找到。

下一场是手提式有线电话机上海展览中心示的成效:

他结业后去当了交通警长,一直没有再谈恋爱。他休假的时候有一天去高校找俺,那时候自个儿正在和地理教员商讨去比赛的事体,穿着交通警长衣服的她走过来吓了大家一跳。结果没悟出地理老师却比自个儿还快的认出她来。

图片 6

原先,他和地理老师是小学同学、初级中学同学。而且她们四个人从小学开首就是很好的朋友。他们在本人前边聊起天来,笔者也就足够知趣的偏离了。

2.
甩卖地理定位错误

新兴,他们理所应当的在一道了。老师不在乎她是为了第①个女孩才去当交通协警,他也实在时辰候喜欢过自家的师资。

大家得以给getCurrentPosition方法提供第1个参数,它让大家能够钦命一个函数,在收获地点发生错误时调用它。此函数会取得多个PositionError对象,它定义的属性如下:

又过了不久,他们五人就举行了婚礼。也正是自己以后到位的那个婚礼。

图片 7

她说,他不会遗忘他的那两段爱情,但也是真的爱她。

code 属性有多少个恐怕的值:

他说,她一笑置之,因为她也是实在爱她……

图片 8

上边包车型客车以身作则显示了什么样用PositionError对象收取错误。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用PositionError处理错误</title>
    <style type="text/css">
        table {border-collapse: collapse;}
        th,td {padding: 4px;}
        th {text-align: right;}
    </style>
</head>
<body>
<table border="1">
    <tr>
        <th>Longitude:</th><td id="longitude">-</td>
        <th>Latitude:</th><td id="latitude">-</td>
    </tr>
    <tr>
        <th>Altitude:</th><td id="altitude">-</td>
        <th>Accuracy:</th><td id="accuracy">-</td>
    </tr>
    <tr>
        <th>Altitude Accuracy:</th><td id="altitudeAccuracy">-</td>
        <th>Heading:</th><td id="heading">-</td>
    </tr>
    <tr>
        <th>Speed:</th><td id="speed">-</td>
        <th>Time Stamp:</th><td id="timestamp">-</td>
    </tr>
    <tr>
        <th>Code:</th><td id="errcode">-</td>
        <th>Error Message:</th><td id="errmessage">-</td>
    </tr>
</table>
<script type="application/javascript">
    navigator.geolocation.getCurrentPosition(displayPosition,handleError);
    function displayPosition(pos){
        var propertis = ["longitude","latitude","altitude","accuracy",
            "altitudeAccuracy","heading","speed"];
        for(var i=0;i<propertis.length;i++){
            var value = pos.coords[propertis[i]];
            document.getElementById(propertis[i]).innerHTML = value;
        }
        document.getElementById("timestamp").innerHTML = pos.timestamp;
    }

    function handleError(err){
        document.getElementById("errcode").innerHTML = err.code;
        document.getElementById("errmessage").innerHTML = err.message;
    }
</script>
</body>
</html>

制作错误最简便的格局是在浏览器提醒时拒绝授权。其出示效果如下:

图片 9

 

3.钦命地理定位选拔

大家得以给getCurrentPosition 方法提供的第多少个参数是二个PositionOptions
对象。那一个效应允许大家得以部分决定地点音讯的拿走格局。下表显示了那么些目的定义的质量:

图片 10

设置highAccuracy属性为true只是请求浏览器给出大概的特级结果,并不保险收获的地方一定会更标准。对运动设备来说,获得更规范地方的或是情势是剥夺节约财富方式,或许在少数处境下开辟GPS作用(低精度地方音信可财富于Wi-Fi
或基站数量)。别的装备则只怕不能够赢得更高精度的数目。修改前边例子的JavaScript代码如下,其出示了在呼吁地方时怎么着使用PositionOptions对象:

<script type="application/javascript">
    var options ={
        enableHigAccuracy:false,
        timeout:2000,
        maximumAge:30000
    };
    navigator.geolocation.getCurrentPosition(displayPosition,handleError,options);
    function displayPosition(pos){
        var propertis = ["longitude","latitude","altitude","accuracy",
            "altitudeAccuracy","heading","speed"];
        for(var i=0;i<propertis.length;i++){
            var value = pos.coords[propertis[i]];
            document.getElementById(propertis[i]).innerHTML = value;
        }
        document.getElementById("timestamp").innerHTML = pos.timestamp;
    }

    function handleError(err){
        document.getElementById("errcode").innerHTML = err.code;
        document.getElementById("errmessage").innerHTML = err.message;
    }
</script>

那个剧本有一处不平日的地点:那里没有成立二个新的PositionOptions
对象,而是创制了三个习以为常的Object,并定义了报表里的那个属性。此例申明了不供给获得最高级的精度,并准备在呼吁超时前等待2秒,而且愿意承受缓存了不当先30秒的数码。

 

4.监理地点

能够用watchPosition 方法不断赢得有关地方的换代。那几个点子所需的参数和
getCurrentPosition
方法同样,工作措施也如出一辙。它们的差距在于:随着地方发生变动,回调函数会被频繁地调用。上面包车型客车例子展现了何等运用
watchPosition 方法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用watchPosition</title>
    <style type="text/css">
        table {border-collapse: collapse;}
        th,td {padding: 4px;}
        th {text-align: right;}
    </style>
</head>
<body>
<table border="1">
    <tr>
        <th>Longitude:</th><td id="longitude">-</td>
        <th>Latitude:</th><td id="latitude">-</td>
    </tr>
    <tr>
        <th>Altitude:</th><td id="altitude">-</td>
        <th>Accuracy:</th><td id="accuracy">-</td>
    </tr>
    <tr>
        <th>Altitude Accuracy:</th><td id="altitudeAccuracy">-</td>
        <th>Heading:</th><td id="heading">-</td>
    </tr>
    <tr>
        <th>Speed:</th><td id="speed">-</td>
        <th>Time Stamp:</th><td id="timestamp">-</td>
    </tr>
    <tr>
        <th>Code:</th><td id="errcode">-</td>
        <th>Error Message:</th><td id="errmessage">-</td>
    </tr>
</table>
<button id="pressme">Cancel Watch</button>
<script type="application/javascript">
    var options ={
        enableHigAccuracy:false,
        timeout:2000,
        maximumAge:30000
    };
    var watchID = navigator.geolocation.watchPosition(displayPosition,handleError,options);
    document.getElementById("pressme").onclick = function(e){
        navigator.geolocation.clearWatch(watchID);
    }
    function displayPosition(pos){
        var propertis = ["longitude","latitude","altitude","accuracy",
            "altitudeAccuracy","heading","speed"];
        for(var i=0;i<propertis.length;i++){
            var value = pos.coords[propertis[i]];
            document.getElementById(propertis[i]).innerHTML = value;
        }
        document.getElementById("timestamp").innerHTML = pos.timestamp;
    }

    function handleError(err){
        document.getElementById("errcode").innerHTML = err.code;
        document.getElementById("errmessage").innerHTML = err.message;
    }
</script>
</body>
</html>

在这么些例子里,脚本用
watchPosition方法来监督地点。当大家想要甘休监察和控制时,能够把此格局重临的ID值传递给
clearWatch。这里采纳在button按钮被按下时实施那么些操作。

 

来源:《HTML5高不可攀指南》(《The Definitive Guide to
HTML5》)

相关文章

No Comments, Be The First!
近期评论
    分类目录
    功能
    网站地图xml地图