文章目录
HTML 地理位置 API
HTML 地理位置 API 用于定位用户的位置。
定位用户的位置
HTML 地理位置 API 用于获取用户的地理位置。
由于这可能会泄露隐私,因此除非用户同意,否则无法获取位置。
注意:对于配备 GPS 的设备(如智能手机),地理位置最准确。
使用 HTML 地理位置
getCurrentPosition() 方法用于返回用户的位置。
以下示例返回用户位置的纬度和经度:
示例
<script>
const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "此浏览器不支持地理定位。";
}
}
function showPosition(position) {
x.innerHTML = "纬度:" + position.coords.latitude +
"<br>经度:" + position.coords.longitude;
}
</script>
说明:
检查是否支持地理定位
如果支持,则运行 getCurrentPosition() 方法。如果没有,则向用户显示一条消息
如果 getCurrentPosition() 方法成功,它会将一个坐标对象返回给参数 (showPosition) 中指定的函数
showPosition() 函数输出纬度和经度
上面的示例是一个非常基本的地理定位脚本,没有错误处理。
处理错误和拒绝
getCurrentPosition() 方法的第二个参数用于处理错误。它指定在无法获取用户位置时运行的函数:
示例
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "用户拒绝了地理定位请求。"
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "位置信息不可用。"
break;
case error.TIMEOUT:
x.innerHTML = "获取用户位置的请求已超时。"
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "发生未知错误。"
break;
}
}
位置特定信息
本页演示了如何在地图上显示用户的位置。
地理定位对于位置特定信息也非常有用,例如:
- 最新的本地信息
- 显示用户附近的兴趣点
- 逐向导航 (GPS)
getCurrentPosition() 方法 - 返回数据
getCurrentPosition() 方法在成功时返回一个对象。始终返回纬度、经度和准确度属性。如果可用,则返回其他
属性 | 属性返回 |
---|---|
coords.latitude | 十进制数形式的纬度(始终返回) |
coords.longitude | 十进制数形式的经度(始终返回) |
coords.accuracy | 位置的精度(始终返回) |
coords.altitude | 海拔高度(以米为单位)(如果可用,则返回) |
coords.altitudeAccuracy | 位置的高度精度(如果可用,则返回) |
coords.heading | 以北为单位的顺时针方向(以度为单位)(如果可用,则返回) |
coords.speed | 以米/秒为单位的速度(如果可用,则返回) |
timestamp | 响应的日期/时间(如果可用,则返回) |
Geolocation对象 - 其他有趣的方法
Geolocation 对象还有其他有趣的方法:
- watchPosition() - 返回用户的当前位置,并在用户移动时继续返回更新的位置(就像汽车中的 GPS 一样)。
- clearWatch() - 停止 watchPosition() 方法。
以下示例显示了 watchPosition() 方法。您需要一个精确的 GPS 设备来测试此方法(如智能手机):
示例
<script>
const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(showPosition);
} else {
x.innerHTML = "此浏览器不支持地理位置。";
}
}
function showPosition(position) {
x.innerHTML = "纬度:" + position.coords.latitude +
"<br>经度:" + position.coords.longitude;
}
</script>
总结
本文介绍了的使用,如有问题欢迎私信和评论