HTML5 Geolocation(地理定位)3

简介: 本页介绍如何在地图上显示用户位置,并利用地理定位获取给定位置的详细信息,包括更新本地信息、显示周边兴趣点及实现车载导航。通过 `getCurrentPosition()` 方法可获取用户当前位置的详细数据,如经纬度、精度等。`watchPosition()` 方法则持续跟踪用户位置变化,适用于实时导航。示例代码展示了如何使用这些方法获取并显示位置信息。

给定位置的信息

本页演示的是如何在地图上显示用户的位置。不过,地理定位对于给定位置的信息同样很有用处。

可用于:

更新本地信息
显示用户周围的兴趣点
交互式车载导航系统 (GPS)

getCurrentPosition() 方法 - 返回数据

T若成功,则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用,则会返回其他下面的属性。
属性 描述
coords.latitude 十进制数的纬度
coords.longitude 十进制数的经度
coords.accuracy 位置精度
coords.altitude 海拔,海平面以上以米计
coords.altitudeAccuracy 位置的海拔精度
coords.heading 方向,从正北开始以度计
coords.speed 速度,以米/每秒计
timestamp 响应的日期/时间

Geolocation 对象 - 其他有趣的方法

watchPosition() - 返回用户的当前位置,并继续返回用户移动时的更新位置(就像汽车上的 GPS)。

clearWatch() - 停止 watchPosition() 方法

下面的例子展示 watchPosition() 方法。您需要一台精确的 GPS 设备来测试该例(比如 iPhone):
实例
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.watchPosition(showPosition);
}
else
{
x.innerHTML="该浏览器不支持获取地理位置。";
}
}
function showPosition(position)
{
x.innerHTML="纬度: " + position.coords.latitude +
"
经度: " + position.coords.longitude;
}

相关文章
|
移动开发 搜索推荐 定位技术
HTML地理定位
HTML地理定位
463 0
|
网络协议 应用服务中间件 网络安全
Nginx,正向代理
本文介绍了Nginx作为HTTPS正向代理的两种方案:HTTP CONNECT隧道(7层)和NGINX stream(4层)。HTTP CONNECT隧道需要客户端手动配置代理,通过CONNECT请求建立隧道;而NGINX stream则更适合透明代理,利用SNI字段实现流量转发。文章详细讲解了两者的原理、环境搭建、使用场景及常见问题,并提供了配置示例和最佳实践建议。内容转载自阿里云开发者社区@怀知的文章,推荐读者参阅原文获取更多信息。感谢您的阅读!
3489 80
Nginx,正向代理
|
JSON Java 定位技术
【Android App】GPS获取定位经纬度和根据经纬度获取详细地址讲解及实战(附源码和演示 超详细)
【Android App】GPS获取定位经纬度和根据经纬度获取详细地址讲解及实战(附源码和演示 超详细)
6593 2
|
存储 移动开发 定位技术
HTML5 Geolocation(地理定位)优化到最高精度
HTML5 Geolocation API 可让网页访问用户的地理位置信息。为优化地理定位精度,需考虑设备、浏览器设置、网络状况及编码实现。使用 `enableHighAccuracy` 选项请求高精度,并确保设备开启 GPS,网络良好。结合多种数据源(如 GPS、Wi-Fi)可提高准确性。利用 `watchPosition` 定期更新位置,并妥善处理定位错误。务必遵循用户隐私原则,获取同意并遵守相关法规。这样可有效提升地理定位的精度与用户体验。
|
JSON 中间件 Go
go语言后端开发学习(四) —— 在go项目中使用Zap日志库
本文详细介绍了如何在Go项目中集成并配置Zap日志库。首先通过`go get -u go.uber.org/zap`命令安装Zap,接着展示了`Logger`与`Sugared Logger`两种日志记录器的基本用法。随后深入探讨了Zap的高级配置,包括如何将日志输出至文件、调整时间格式、记录调用者信息以及日志分割等。最后,文章演示了如何在gin框架中集成Zap,通过自定义中间件实现了日志记录和异常恢复功能。通过这些步骤,读者可以掌握Zap在实际项目中的应用与定制方法
1079 1
go语言后端开发学习(四) —— 在go项目中使用Zap日志库
|
Java 中间件 API
【分布式技术专题】「Zookeeper中间件」给大家学习一下Zookeeper的”开发伴侣”—Curator-Framework(基础篇)
【分布式技术专题】「Zookeeper中间件」给大家学习一下Zookeeper的”开发伴侣”—Curator-Framework(基础篇)
964 107
【分布式技术专题】「Zookeeper中间件」给大家学习一下Zookeeper的”开发伴侣”—Curator-Framework(基础篇)
|
移动开发 JavaScript 前端开发
uniapp在H5获取当前定位信息不需要SDK可直接获取城市(包括经纬度省市区和市区编码)
最近在做获取用户当前定位信息的时候,发现uniapp官方提供的兼容性并不是特别好,光注意事项都是密密麻麻一大堆,在实际使用场景下,效果并不理想,也不是很稳定。于是便重新封装了一下腾讯地图的一些东西,提高了下兼容度!下边我会把我用的封装思路逻辑给大家一一讲解。完整代码可私信我我发给你以上便是基于uni-app框架开发,使用Promise进行异步请求和结果返回,封装的H5获取当前详细定位信息组件希望大家一起交流。
4862 0
vue2 自定义 v-model (model选项的使用)
vue2 自定义 v-model (model选项的使用)
2039 1
|
JavaScript 前端开发 Java
花了一天时间, 搜刮的个人觉得不错的16套vue3后台管理模版
花了一天时间, 搜刮的个人觉得不错的16套vue3后台管理模版
7704 2
花了一天时间, 搜刮的个人觉得不错的16套vue3后台管理模版

热门文章

最新文章