HTML5 Geolocation API的正确使用方法


Posted in HTML / CSS onDecember 04, 2018

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')
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS+jQuery+PHP+MySQL实现的在线答题功能
Apr 25 HTML / CSS
简单介绍CSS3中Media Query的使用
Jul 07 HTML / CSS
HTML5 本地存储实现购物车功能
Sep 07 HTML / CSS
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
Jan 31 HTML / CSS
HTML5 创建canvas元素示例代码
Jun 04 HTML / CSS
使用HTML5中的contentEditable来将多行文本自动增高
Mar 01 HTML / CSS
HTML5中的进度条progress元素简介及兼容性处理
Jun 02 HTML / CSS
html5 canvas绘制矩形和圆形的实例代码
Jun 16 HTML / CSS
HTML5中使用json对象的实例代码
Sep 10 HTML / CSS
html+css实现分层金字塔的实例
Jun 02 HTML / CSS
html css3不拉伸图片显示效果
Jun 07 HTML / CSS
flex布局中使用flex-wrap实现换行的项目实践
Jun 21 HTML / CSS
canvas实现俄罗斯方块的方法示例
Dec 13 #HTML / CSS
localStorage 设置过期时间的方法实现
Dec 21 #HTML / CSS
webapp字号大小跟随系统字号大小缩放的示例代码
Dec 26 #HTML / CSS
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
Jan 05 #HTML / CSS
HTML5实现表单自动验证功能实例代码
Jan 11 #HTML / CSS
HTML5 File接口在web页面上使用文件下载
Feb 27 #HTML / CSS
使用phonegap检测网络状态的方法
Mar 30 #HTML / CSS
You might like
php 代码优化之经典示例
2011/03/24 PHP
php数组键名技巧小结
2015/02/17 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
php多进程模拟并发事务产生的问题小结
2018/12/07 PHP
PHP token验证生成原理实例分析
2019/06/05 PHP
PHP创建XML接口示例
2019/07/04 PHP
两个select之间option的互相添加操作(jquery实现)
2009/11/12 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
2013/03/19 Javascript
jquery清空textarea等输入框实现代码
2013/04/22 Javascript
你必须知道的Javascript知识点之"单线程事件驱动"的使用
2013/04/23 Javascript
使用phantomjs进行网页抓取的实现代码
2014/09/29 Javascript
jQuery中用dom操作替代正则表达式
2014/12/29 Javascript
asp.net中oracle 存储过程(图文)
2015/08/12 Javascript
jquery实现具有嵌套功能的选项卡
2016/02/12 Javascript
js滚动条平滑移动示例代码
2016/03/29 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
2016/12/19 Javascript
JS+HTML5 FileReader对象用法示例
2017/04/07 Javascript
JavaScript通过filereader接口读取文件
2017/05/10 Javascript
JS实现前端页面的搜索功能
2018/06/12 Javascript
使用Javascript简单计算器
2018/11/17 Javascript
javascript实现商品图片放大镜
2019/11/28 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
2020/01/05 Javascript
js实现自定义滚动条的示例
2020/10/27 Javascript
python中将函数赋值给变量时需要注意的一些问题
2017/08/18 Python
python脚本实现验证码识别
2018/06/07 Python
对python3.4 字符串转16进制的实例详解
2019/06/12 Python
python GUI库图形界面开发之PyQt5滚动条控件QScrollBar详细使用方法与实例
2020/03/06 Python
日本高端护肤品牌:Tatcha
2016/08/29 全球购物
关于母亲节的感言
2014/02/04 职场文书
园林技术个人的自我评价
2014/02/15 职场文书
党的群众路线教育实践活动学习笔记范文
2014/11/06 职场文书
销售经理岗位职责范本
2015/04/02 职场文书
用 Python 元类的特性实现 ORM 框架
2021/05/19 Python
新手必备之MySQL msi版本下载安装图文详细教程
2021/05/21 MySQL
详解Flask开发技巧之异常处理
2021/06/15 Python