HTML5 定位 —— Geolocation 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 / falseenableHighAccuracy: 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 // 成功获取位置信息时的时间戳} = dataconst {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('位置服务请求被拒绝')breakcase 2:console.log('暂时获取不到位置信息')breakcase 3:console.log('获取信息超时')breakcase 4:console.log('未知错误')break}
}const opt = {// 高精确度: true / falseenableHighAccuracy: 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 定位 —— Geolocation API的正确使用相关推荐
- html5 地理api,HTML5地理定位-Geolocation API
HTML5提供了一组Geolocation API,来自navigator定位对象的子对象,获取用户的地理位置信息 Geolocation API使用方法: 1.判断是否支持 navigator.ge ...
- html5 判断获取定位,HTML5利用Geolocation API获取地理位置定位功能
如何使用html5地理位置定位功能 定位功能(Geolocation)是HTML5的新特性,因此只有在支持HTML5的现代浏览器上运行,特别是手持设备如iphone,地理定位更加精确.首先我们要检测用 ...
- HTML5 定位 geolocation
HTML5新特性 定位,可以获取当前位置的经纬度: window.onload = function() {window.navigator.geolocation.getCurrentPositio ...
- html自动获取用户位置,HTML5 - 使用Geolocation(地理定位)获取用户的位置
一.Geolocation(地理定位) 1,基本介绍 (1)虽然 Geolocation 经常以 HTML5 的名义提到,但地理定位实际上是一个单独的标准,而且也不是经由 WHATWG 制定的. (2 ...
- html浏览位置坐标,HTML5教程 | HTML5地理定位(GeoLocation API)
HTML5 GeoLocation API(地理定位API)可以获取用户所在的地理位置.由于安全的原因,在使用HTML5 GeoLocation的时候,会弹出对话框让用户决定是否共享他们所在的位置,只 ...
- HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)...
1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息. 但是coo ...
- [html] HTML5的Geolocation不允许定位后如何于次让它弹起授权定位?
[html] HTML5的Geolocation不允许定位后如何于次让它弹起授权定位? JS应该不能通过API主动再次调起授权定位. 需要提示用户,需要用户手动清除浏览器缓存或者设置app开启浏览器定 ...
- html5 定位 计算距离,HTML5 地理定位+地图 API:计算用户到商家的距离
背景 最近在做一个类似支付宝口碑商家的功能模块,其中有个功能就是计算出用户与商家的距离,如下图: 支付宝口碑商家页面截图 思路分析 1.商家选取店铺地址,将坐标经纬度存入数据库: 2.移动端定位当前用 ...
- HTML5+百度地图API实现地理定位
背景 如果知道用户在哪里,往往会提高很多Web应用的体验,比如为用户指明方向,对它们要去的地方给出建议,让用户知道它们所在的区域内有哪些人可能会对某个活动感兴趣等等.现在,利用HTML5(以及基于Ja ...
- HTML5 Geolocation API : 实时跟踪应用
getCurrentPosition与watchPosition watchPosition会监视你的移动,并在位置改变时向你报告位置.watchPPosition方法看上去确实与getCurrent ...
最新文章
- 刘强东的代码水平到底有多强?30年前就已破万!
- 如何查看tomcat是否安装成功_如何查看网站是否被收录?
- SAPPHIRE NOW阿里云 - 国内传播
- unity 中让Text的文字动态刷新形式
- linux 下启动jar小程序
- 嵌入式Linux的Qt
- k8s的ingress使用
- 洛谷 P3359 改造异或树
- 使用 CometD、Apache 和 Camel 的 502 代理错误
- 还是TFS的问题,包括源代码管理和甘特图操作
- MySql常用函数汇总
- Oracle P6培训系列:15定义资源库
- 查看php是否支持sg11,云虚拟主机支持SG11扩展
- 关于java构造函数 的错误 there is no default constructor available in ...
- attitude determines altitude 态度决定高度
- 自定义circleindicator
- webstorm 2017 激活破解方法大全
- 打印机驱动装上了,却无法正常打印的问题解决方法
- 麻姑山行,记南城麻姑山一日游
- python实现屏幕视频录制_Python实现屏幕录制功能的代码
热门文章
- Asp.net实用技巧
- 对于制造企业来说,APS的价值在哪里?
- 【Prison Break】第六天(4.2)
- 【Knowledge Fragment】
- Deep Learning经典论文列表(Reading List)
- 从零基础入门Tensorflow2.0 ----七、37. 文本生成之---3. 采样文本生成
- 【Tensorflow2】语义分割实战1---斑马线识别
- 从零基础入门Tensorflow2.0 ----五、23TF1.0计算图构建,模型训练
- PHP邮件扩展,PHP邮件扩展:mailpp
- Flutter之SnackBar原理详解