怎么在html5中使用地理位置实现一个定位功能 - 行业资讯

　　介绍

今天就跟大家聊聊有关怎么在html5中使用地理位置实现一个定位功能,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

<强> 1。获取当前位置
我们将使用getCurrentPosition方法获取当前位置,位置信息不会以结果的形式直接返回,我们需要使用回调函数进行处理。在获取坐标的过程中会有些延迟,还会问你要访问权限。我们来看下面的例子:

代码如下:

& lt; ! DOCTYPE HTML>, 　　& lt; html>, 　　& lt; head>, 　　& lt; title> Example, 　　& lt; style>, 　　表{border-collapse:崩溃;}, 　　th, td{填充:4 px;}, 　　th {text-align:对的;}, 　　时间/style> & lt; 　　时间/head> & lt; 　　& lt; body>, 　　& lt; table 边界=?“祝辞, 　　& lt; tr>, 　　& lt; th>经度:& lt;/th>, 　　& lt; td id=發ongitude"祝辞& lt;/td>, 　　& lt; th>纬度:& lt;/th>, 　　& lt; td id=發atitude"祝辞& lt;/td>, 　　时间/tr> & lt; 　　& lt; tr>, 　　& lt; th>高度:& lt;/th>, 　　& lt; td id=癮ltitude"祝辞& lt;/td>, 　　& lt; th>准确性:& lt;/th>, 　　& lt; td id=癮ccuracy"祝辞& lt;/td>, 　　时间/tr> & lt; 　　& lt; tr>, 　　& lt; th> Altitude 准确性:& lt;/th>, 　　& lt; td id=癮ltitudeAccuracy"祝辞& lt;/td>, 　　& lt; th>标题:& lt;/th>, 　　& lt; td id=癶eading"祝辞& lt;/td>, 　　时间/tr> & lt; 　　& lt; tr>, 　　& lt; th>速度:& lt;/th>, 　　& lt; td id=皊peed"祝辞& lt;/td>, 　　& lt; th> Time 邮票:& lt;/th>, 　　& lt; td id=皌imestamp"祝辞& lt;/td>, 　　时间/tr> & lt; 　　时间/table> & lt; 　　& lt; script>, 　　navigator.geolocation.getCurrentPosition (displayPosition);, 　　function displayPosition (pos), {, 　　var properties =,(& # 39;经度# 39;,,& # 39;纬度# 39;,,& # 39;海拔# 39;,,& # 39;准确性# 39;,,& # 39;altitudeAccuracy& # 39;,, & # 39;标题# 39;,,& # 39;速度# 39;];, 　　for (var 小姐:=,0,,len =, properties.length;,小姐:& lt;, len;,我+ +),{, 　　var value =, pos.coords[属性[我]];, 　　[我]. getelementbyid(属性).innerHTML =,价值,, 　　}, 　　. getelementbyid(& # 39;时间戳# 39;).innerHTML =, pos.timestamp;, 　　}, 　　时间/script> & lt; 　　时间/body> & lt; 　　& lt;/html>

返回的位置对象包含两个属性,坐标:返回坐标信息,时间戳:获取坐标信息的时间,其中坐标又包括下面属性:纬度:纬度,经度:经度;高度:高度;准确性:精确度(米);altitudeAccuracy:高度精确度(米);标题:行进方向,速度:行进速度(米/秒)。
并不是所有的信息都会返回,这取决于你承载浏览器的设备。像有GPS,加速器,罗盘的移动设备会返回大部分信息,家用电脑就不行了。家用电脑获取的位置信息,取决于所处的网络环境或者是wifi。下面我们看上例的运行结果。

怎么在html5中使用地理位置实现一个定位功能

点击允许,获取坐标信息。

怎么在html5中使用地理位置实现一个定位功能

<强> 2。处理异常
现在我们介绍getCurrentPosition的异常处理,他是通过使用errorCallback回调函数实现的。函数返回的参数错误包含两个属性,代码:错误类型的代码;信息:错误信息.code包含三个值:1:用户没有授权使用地理定位;2:无法获取坐标信息;3:获取信息超时。
下面我们看个例子:

代码如下:

& lt; !DOCTYPE HTML>
& lt; html>
& lt; head>
& lt; title> Example
& lt; style>
表{border-collapse:崩溃;}
, td{填充:4 px;}
th {text-align:权利;}
& lt;/style>
& lt;/head>
& lt; body>
& lt;表边界=?“比;
& lt; tr>
& lt; th>经度:& lt;/th>
& lt; td id=發ongitude"祝辞& lt;/td>
& lt; th>纬度:& lt;/th>
& lt; td id=發atitude"祝辞& lt;/td>
& lt;/tr>
& lt; tr>
& lt; th>高度:& lt;/th>
& lt; td id=癮ltitude"祝辞& lt;/td>
& lt; th>准确性:& lt;/th>
& lt; td id=癮ccuracy"祝辞& lt;/td>
& lt;/tr>
& lt; tr>
& lt; th>高度准确性:& lt;/th>
& lt; td id=癮ltitudeAccuracy"祝辞& lt;/td>
& lt; th>标题:& lt;/th>
& lt; td id=癶eading"祝辞& lt;/td>
& lt;/tr>
& lt; tr>
& lt; th>速度:& lt;/th>