iis服务器助手广告广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 精选 >怎么在html5中使用Geolocation实现一个定位功能
  • 942

0
分享到

怎么在html5中使用Geolocation实现一个定位功能

2023-06-09 21:06:44 942人浏览 安东尼
摘要

今天就跟大家聊聊有关怎么在HTML5中使用Geolocation实现一个定位功能，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。1.获取当前位置 我们将使用getCurrentPosi

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


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

代码如下:

<!DOCTYPE html> <html> <head> <title>Example</title> <style> 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> navigator.geolocation.getCurrentPosition(displayPosition); function displayPosition(pos) { var properties = ['longitude', 'latitude', 'altitude', 'accuracy', 'altitudeAccuracy', 'heading', 'speed']; for (var i = 0, len = properties.length; i < len; i++) { var value = pos.coords[properties[i]]; document.getElementById(properties[i]).innerHTML = value; } document.getElementById('timestamp').innerHTML = pos.timestamp; } </script> </body> </html>


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

怎么在html5中使用Geolocation实现一个定位功能


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

怎么在html5中使用Geolocation实现一个定位功能

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

代码如下:


<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
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>Error Code:</th>
<td id="errcode">-</td>
<th>Error Message:</th>
<td id="errmessage">-</td>
</tr>
</table>
<script>
navigator.geolocation.getCurrentPosition(displayPosition, handleError);
function displayPosition(pos) {
var properties = ["longitude", "latitude", "altitude", "accuracy", "altitudeAccuracy", "heading", "speed"];
for (var i = 0; i < properties.length; i++) {
var value = pos.coords[properties[i]];
document.getElementById(properties[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>


拒绝授权，运行结果：

怎么在html5中使用Geolocation实现一个定位功能

3.使用geolocation可选参数项
getCurrentPosition(callback,errorCallback,options)中的options有如下参数可以使用，enableHighAccuracy：使用最好的效果；timeout：超时时间（毫秒）；maximumAge：指定缓存时间（毫秒）。我们来下下面的例子：

代码如下:


<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
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>Error Code:</th>
<td id="errcode">-</td>
<th>Error Message:</th>
<td id="errmessage">-</td>
</tr>
</table>
<script>
var options = {
enableHighAccuracy: false,
timeout: 2000,
maximumAge: 30000
};
navigator.geolocation.getCurrentPosition(displayPosition, handleError, options);
function displayPosition(pos) {
var properties = ["longitude", "latitude", "altitude", "accuracy", "altitudeAccuracy", "heading", "speed"];
for (var i = 0; i < properties.length; i++) {
var value = pos.coords[properties[i]];
document.getElementById(properties[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>


4.监视位置变化
下面我们介绍使用watchPosition方法实现位置变化的监视，他的使用方法和getCurrentPosition一样。我们来看例子：

代码如下:


<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
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>Error Code:</th>
<td id="errcode">-</td>
<th>Error Message:</th>
<td id="errmessage">-</td>
</tr>
</table>
<button id="preSSMe">Cancel Watch</button>
<script>
var options = {
enableHighAccuracy: 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 properties = ["longitude", "latitude", "altitude", "accuracy", "altitudeAccuracy", "heading", "speed"];
for (var i = 0; i < properties.length; i++) {
var value = pos.coords[properties[i]];
document.getElementById(properties[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>

看完上述内容，你们对怎么在html5中使用Geolocation实现一个定位功能有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注编程网精选频道，感谢大家的支持。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 怎么在html5中使用Geolocation实现一个定位功能

本文链接: https://www.lsjlt.com/news/257821.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • 怎么在html5中使用Geolocation实现一个定位功能
    今天就跟大家聊聊有关怎么在html5中使用Geolocation实现一个定位功能，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。1.获取当前位置 我们将使用getCurrentPosi...
    99+
    2023-06-09
  • 怎么在HTML5中使用Geolocation实现一个距离追踪器
    今天就跟大家聊聊有关怎么在HTML5中使用Geolocation实现一个距离追踪器，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。页面结构如下所示：<div id=&q...
    99+
    2023-06-09
  • HTML5中Geolocation地理位置定位API怎么用
    这篇文章将为大家详细讲解有关HTML5中Geolocation地理位置定位API怎么用，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。基本用法 首先，我们可以从浏...
    99+
    2024-04-02
  • HTML5中怎么使用地理位置实现定位功能
    本篇内容介绍了“HTML5中怎么使用地理位置实现定位功能”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！我们...
    99+
    2024-04-02
  • 怎么在html5中实现一个时钟功能
    这期内容当中小编将会给大家带来有关怎么在html5中实现一个时钟功能，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。<!DOCTYPE HTML><html><hea...
    99+
    2023-06-09
  • 怎么在HTML5中使用tracking.js实现一个刷脸支付功能
    怎么在HTML5中使用tracking.js实现一个刷脸支付功能？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。摄像头1.1input获取摄像头html5中获取用户摄像头，有...
    99+
    2023-06-09
  • 怎么在Html5中实现一个剪切板功能
    这期内容当中小编将会给大家带来有关怎么在Html5中实现一个剪切板功能，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。1.不带input输入框的原生js方法这种情况适用于复制非输入框中的文本到剪切板&nbs...
    99+
    2023-06-09
  • 怎么在html5中利用canvas实现一个弹幕功能
    本篇文章为大家展示了怎么在html5中利用canvas实现一个弹幕功能，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。(function () {   ...
    99+
    2023-06-09
  • 怎么在html5项目中实现一个录音功能
    这篇文章给大家介绍怎么在html5项目中实现一个录音功能，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。步骤1由于新的api是通过navigator.mediaDevices.getUserMedia，且返回一个prom...
    99+
    2023-06-09
  • Win8怎么用自带的GeoLocation地理定位功能?
    现在很多手机应用都有地理定位功能，能够准确定位，搜索目的地。其实在Win8系统中也有地理定位功能，叫做GeoLocation。相 操作步骤： 1、 使用组合热键“Win+X”调出快捷菜单，点击并打...
    99+
    2023-05-20
    Win8 GeoLocation
  • 怎么在HTML5中实现一个视频弹幕功能
    这篇文章给大家介绍怎么在HTML5中实现一个视频弹幕功能，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。1>html代码展示<div class="barrage">&nb...
    99+
    2023-06-09
  • 怎么 在HTML5中实现一个语音合成功能
    怎么 在HTML5中实现一个语音合成功能？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。 Speech Synthesis API通过上面的例子我们可以猜测到上面调用的...
    99+
    2023-06-09
  • 怎么在css中使用autoflow 属性实现一个选座位功能
    怎么在css中使用autoflow 属性实现一个选座位功能？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。autoflow属性，如果元素内容的长宽超出元素本身的长宽则会出现滚动条...
    99+
    2023-06-08
  • 怎么在HTML5中实现一个图片预加载功能
    这篇文章给大家介绍怎么在HTML5中实现一个图片预加载功能，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。在HTML5中，我们可以使用drawImage方法在canvas上进行画图操作，其基本代码如下：var ...
    99+
    2023-06-09
  • 使用Html5怎么实现一个微信语音功能
    使用Html5怎么实现一个微信语音功能？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。为什么要学会HTML5 的语音呢？Html5 规范推进，手机的更新加速了操作...
    99+
    2023-06-09
  • 使用Html5怎么实现一个语音搜索功能
    这篇文章给大家介绍使用Html5怎么实现一个语音搜索功能，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。html是什么html的全称为超文本标记语言，它是一种标记语言，包含了一系列标签．通过这些标签可以将网络上的文档格式...
    99+
    2023-06-09
  • 怎么在HTML5中Blob利用实现一个文件下载功能
    怎么在HTML5中Blob利用实现一个文件下载功能？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。$("#exportAll").on(&qu...
    99+
    2023-06-09
  • 怎么在html5中使用type="range"属性实现一个滑块功能
    这篇文章将为大家详细讲解有关怎么在html5中使用type="range"属性实现一个滑块功能，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。html5实现滑块功能之typ...
    99+
    2023-06-09
  • 怎么在HTML5中使用MUI框架实现一个二维码扫描功能
    怎么在HTML5中使用MUI框架实现一个二维码扫描功能？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。<!doctype html>&nbs...
    99+
    2023-06-09
  • 怎么在HTML5中使用websocket实现直播功能
    这篇文章给大家介绍怎么在HTML5中使用websocket实现直播功能，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。录像页面HTML结构<video autoplay id="sou...
    99+
    2023-06-09
软考高级职称资格查询
iis服务器助手广告
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作