您现在的位置是:网站首页> 编程资料编程资料
HTML5 Geolocation API的正确使用方法使用HTML5 Geolocation实现一个距离追踪器Html5 Geolocation获取地理位置信息实例HTML5的Geolocation地理位置定位API使用教程html5指南-4.使用Geolocation实现定位功能html5指南-7.geolocation结合google maps开发一个小的应用
2021-09-02
962人已围观
简介 Geolocation是HTML5标准下的一个Web API,利用它可以获取设备的当前位置信息(坐标),本篇文章主要介绍了三个方法,非常具有实用价值,需要的朋友可以参考下
Geolocation是HTML5标准下的一个Web API,利用它可以获取设备的当前位置信息(坐标),此API具有三个方法:getCurrentPosition、watchPosition和clearWatch,其中最常用的是getCurrentPosition方法,剩下两个方法需要搭配使用!
使用方法:
浏览器兼容性检测:
该api通过navigator.geolocation对象发布,只有在此对象存在的情况下,才可以使用它的地理定位服务,检测方法如下:
if (navigator.geolocation) { // 定位代码写在这里 } else { alert('Geolocation is not supported in your browser') } 获取用户的当前位置:
使用getCurrentLocation方法即可获取用户的位置信息,该方法有三个参数:
| 参数列表 | 类型 | 说明 |
| handleSuccess | Function | 成功时调用函数handleSuccess |
| handleError | Function | 失败时调用函数handleError |
| options | Object | 初始化参数 |
// 初始化参数 const options = { // 高精确度: true / false enableHighAccuracy: true, // 等待响应的最长时间 单位:毫秒 timeout: 5 * 1000, // 应用程序愿意接受的缓存位置的最长时间 maximumAge: 0 } // 成功回调函数 : data包含位置信息 const handleSuccess = data => console.log(data) // 失败回调函数 : error包含错误信息 const handleError = error => console.log(error) if (navigator.geolocation) { // 定位代码写在这里 navigator.geolocation.getCurrentPosition(handleSuccess, handleError, options) } else { alert('Geolocation is not supported in your browser') } 下面是具有更多细节的代码:
const handleSuccess = data => { const { coords, // 位置信息 timestamp // 成功获取位置信息时的时间戳 } = data const { accuracy, // 返回结果的精度(米) altitude, // 相对于水平面的高度 altitudeAccuracy, // 返回高度的精度(米) heading, // 主机设备的行进方向,从正北方向顺时针方向 latitude, // 纬度 longitude, // 经度 speed // 设备的行进速度 } = coords // 打印出来看看 console.log('timestamp =', timestamp) console.log('accuracy =', accuracy) console.log('altitude =', altitude) console.log('altitudeAccuracy =', altitudeAccuracy) console.log('heading =', heading) console.log('latitude =', latitude) console.log('longitude =', longitude) console.log('speed =', speed) } const handleError = error => { switch (error.code) { case 1: console.log('位置服务请求被拒绝') break case 2: console.log('暂时获取不到位置信息') break case 3: console.log('获取信息超时') break case 4: console.log('未知错误') break } } const opt = { // 高精确度: true / false enableHighAccuracy: true, // 等待响应的最长时间 单位:毫秒 timeout: 5 * 1000, // 应用程序愿意接受的缓存位置的最大年限 maximumAge: 0 } if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(handleSuccess, handleError, opt) } else { alert('Geolocation is not supported in your browser') } 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
相关内容
- HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等详解html2canvas截图不能截取圆角图片的解决方案使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例HTML5 Canvas自定义圆角矩形与虚线示例代码html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形canvas绘制圆角头像的实现方法
- websocket+sockjs+stompjs详解及实例代码html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法
- 详解使用canvas保存网页为pdf文件支持跨域html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法
- canvas像素画板的实现代码canvas像素点操作之视频绿幕抠图使用Canvas操作像素的方法HTML5 Canvas画线技巧——实现绘制一个像素宽的细线html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因HTML5 Canvas像素处理使用接口介绍
- 使用HTML5 IndexDB存储图像和文件的示例利用Node实现HTML5离线存储的方法H5离线存储Manifest原理及使用HTML5中的网络存储实现方式HTML5离线应用与客户端存储的实现HTML5 本地存储实现购物车功能在HTML5 localStorage中存储对象的示例代码
- H5 canvas中width、height和style的宽高区别详解Canvas中设置width与height的问题浅析canvas需要在标签里直接定义宽高HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
- 详解rem 适配布局关于rem适配的3种常用封装移动 web 端屏幕适配(rem)详解html5页面 rem 布局适配方法详解H5 活动页之移动端 REM 布局适配方法手机端用rem+scss做适配的详解
- HTML高亮关键字的实现代码HTML高亮关键字的完美解决方案
- 前端canvas动画如何转成mp4视频的方法HTML5 Canvas 破碎重组的视频特效的示例代码canvas像素点操作之视频绿幕抠图video结合canvas实现视频在线截图功能canvas绘制视频封面的方法详解基于canvas的视频遮罩插件canvas与html5实现视频截图功能示例Canvas获取视频第一帧缩略图的实现
- Html5 实现微信分享及自定义内容的流程HTML5播放实现rtmp流直播html5用video标签流式加载的实现基于 HTML5 WebGL 实现的医疗物流系统HTML5 canvas 瀑布流文字效果的示例代码HTML5移动端手机网站开发流程HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影HTML5梦幻之旅——炫丽的流星雨效果实现过程HTML5 离线应用之打造零请求、无流量网站的解决方法Html5之webcoekt播放JPEG图片流
