HTML5 Geolocation API 使用指南
4 浏览量
更新于2024-08-31
收藏 86KB PDF 举报
HTML5 Geolocation 实现定位功能指南
Geolocation 是 HTML5 中的一项功能，可以获取用户的地理位置信息。今天，我们将学习如何使用 Geolocation 实现定位功能。
首先，我们可以通过 navigator.geolocation 获取 Geolocation 对象，该对象提供了多种方法来获取和监控用户的地理位置信息。
1. getCurrentPosition() 方法
getCurrentPosition() 方法用于获取当前位置信息，该方法需要一个 callback 函数来处理获取到的位置信息。在获取坐标的过程中，浏览器会询问用户是否授予访问权限。如果用户同意授予权限，callback 函数将被执行，否则 errorCallback 函数将被执行。
下面是一个使用 getCurrentPosition() 方法获取当前位置信息的示例代码：
```html
<!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>AltitudeAccuracy:</th>
<td id="altitudeAccuracy">-</td>
<th>Heading:</th>
<td id="heading">-</td>
</tr>
</table>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, errorHandler);
} else {
alert("你的浏览器不支持 Geolocation！");
}
}
function showPosition(position) {
document.getElementById("longitude").innerHTML = position.coords.longitude;
document.getElementById("latitude").innerHTML = position.coords.latitude;
document.getElementById("altitude").innerHTML = position.coords.altitude;
document.getElementById("accuracy").innerHTML = position.coords.accuracy;
document.getElementById("altitudeAccuracy").innerHTML = position.coords.altitudeAccuracy;
document.getElementById("heading").innerHTML = position.coords.heading;
}
function errorHandler(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
alert("你拒绝授予权限！");
break;
case error.POSITION_UNAVAILABLE:
alert("无法获取当前位置！");
break;
case error.TIMEOUT:
alert("获取当前位置超时！");
break;
case error.UNKNOWN_ERROR:
alert("未知错误！");
break;
}
}
</script>
</body>
</html>
```
2. watchPosition() 方法
watchPosition() 方法用于开始监控当前位置信息，该方法需要一个 callback 函数来处理获取到的位置信息。与 getCurrentPosition() 方法不同的是，watchPosition() 方法会不断地监控当前位置信息，并在位置信息发生变化时执行 callback 函数。
下面是一个使用 watchPosition() 方法监控当前位置信息的示例代码：
```javascript
function watchPosition() {
if (navigator.geolocation) {
var id = navigator.geolocation.watchPosition(showPosition, errorHandler);
} else {
alert("你的浏览器不支持 Geolocation！");
}
}
function showPosition(position) {
// 处理获取到的位置信息
}
function errorHandler(error) {
// 处理错误信息
}
```
3. clearWatch() 方法
clearWatch() 方法用于停止监控当前位置信息，该方法需要一个 id 参数，该 id 是 watchPosition() 方法返回的监控 id。
下面是一个使用 clearWatch() 方法停止监控当前位置信息的示例代码：
```javascript
function clearWatch() {
if (navigator.geolocation) {
navigator.geolocation.clearWatch(id);
} else {
alert("你的浏览器不支持 Geolocation！");
}
}
```
注意：在使用 Geolocation 时，需要确保用户授予权限，并且需要在 HTTPS 协议下使用，以确保安全性。
Geolocation 是 HTML5 中的一项功能，可以获取用户的地理位置信息。通过使用 getCurrentPosition()、watchPosition() 和 clearWatch() 方法，我们可以实现定位功能，并对用户的地理位置信息进行监控和处理。
html5指南指南-4.使用使用Geolocation实现定位功能实现定位功能
今天我们要学习的是使用Geolocation实现定位功能。我们可以通过navigator.geolocation获取Geolocation对象,
感兴趣的朋友可以了解下
今天我们要学习的是使用Geolocation实现定位功能。我们可以通过navigator.geolocation获取Geolocation对象，他提供了下
列方法：
getCurrentPosition(callback,errorCallback,options)：获取当前位置；
watchPosition(callback,error,options)：开始监控当前位置；
clearWatch(id)：停止监控当前位置。
note：下面例子使用的浏览器是chrome，使用其他浏览器我不能保证运行结果和例子显示的结果一致。
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>
下载后可阅读完整内容，剩余4页未读，立即下载
点击了解资源详情
点击了解资源详情
点击了解资源详情
2020-09-28 上传
2022-09-23 上传
2021-10-05 上传
2024-04-20 上传
2019-11-03 上传
2021-10-09 上传
weixin_38691482
- 粉丝: 3
- 资源: 949
我的内容管理
展开
最新资源
- warframe-drop-data:易于解析的Warframe Drop数据格式
- classy-jiesisru:使用DappStarter启动您的区块链开发
- expensify-power-user:让 Expensify 更容易。 使费用化更容易
- food_insta
- ProjetCoursA61
- serverless-slack:适用于AWS Lambda Serverless.js的Slack应用程序框架
- oban_tips：Twitter系列“ Oban技巧”中的汇总技巧
- Ampersand-Fetch:Native #fetch 与 React Native 一起使用
- PK-GO:应用程式Swift，凡事都简化了口袋妖怪GO
- Excel模板培训计划表.zip
- IntroducePage
- django-migration-resolver-hook:django的迁移解析器，确保无论合并更改如何，迁移节点始终保持同步
- cli-real-favicon:RealFaviconGenerator的Node.js CLI
- interstellar:生成四处移动并形成星座的星星
- Risky-Business
- Neural_Network_Charity_Analysis
