geolocation是H5新增的对象,它用于定位,继承在navigator对象内,以前用navigator只用到userAgent,现在就多了这个geolocation

有2种方法(getCurrentPosition、watchPostion),4个配置属性(enableHighAccuracy,timeout,maximumAge,frequency)

getCurrentPosition:

 //获取定位(一次)
navigator.geolocation.getCurrentPosition(
data=>{
// 信息都包含在data.coords里面
},
err=>{
// err是形如 {code: 3, message: "Timeout expired"} 的对象
},
{
enableHighAccuracy:true, //高精度
timeout: 5000, //超时时间
maximumAge: 10000 //位置缓存时间
}
)

data.coords的属性:

  • coords.latitude 纬度
  • coords.longitude 经度
  • coords.altitude 海拔
  • coords.speed 速度
  • coords.accuracy 经纬度精度
  • coords.altitudeAccuracy 海拔精度
  • coords.heading 方向,从正北开始以度计

watchPostion:

 //获取定位(一次)
navigator.geolocation.watchPosition(
data=>{
// 信息都包含在data.coords里面
},
err=>{
// err是形如 {code: 3, message: "Timeout expired"} 的对象
},
{
enableHighAccuracy:true, //高精度
timeout: 5000, //超时时间
maximumAge: 10000, //位置缓存时间
frequency: 1000 //多久监测一次
}
)

ps:geolocation已经不能在http下使用了,只能在https下才行

H5新特性之geolocation的更多相关文章

  1. H5新特性汇总

    H5新特性: 新增选择器 document.querySelector.document.querySelectorAll 拖拽释放(Drag and drop) API 媒体播放的 video 和 ...

  2. H5新特性---SVG--椭圆--直线--文本--滤镜(高斯滤镜--模糊)--地理定位

    今天的目标 3.1:h5新特性--SVG--椭圆 <ellipse rx="" ry=""  cx="" cy="" ...

  3. H5新特性--WebStorage--WebSocke

    今天的目标 3.2:h5新特性--WebStorage localStorage  在客户端浏览器保存数据 永久保存 保存数据 localStorage [key] = value 保存数据 loca ...

  4. H5新特性---Web Worker---Web Stroage

    今天的目标 3.1:h5新特性八--Web Worker---代码就3行 程序:program 存储在外存(磁盘)中代码 进程:Process/Task 将程序调用内存中,分配空间 线程:Thread ...

  5. H5新特性——--第三方绘图工具库 echarts(canvas)---SVG绘图

    今天学习的内容 3.1:h5新特性---第三方绘图工具库 echarts(canvas) 百度 echarts;d3;two.js;.... 3.2:h5新特性---SVG绘图 3.2:h5新特性-- ...

  6. H5新特性-视频,音频-Flash-canvas绘图

    json格式 json - > AJAX json:数据格式,通常是以字符串形式表示 对象 {"name":"james","age" ...

  7. H5新特性实现对class的增删改

    直接撸代码 全靠死记硬背 没什么技术点 HTML部分 <!DOCTYPE html> <html lang="en"> <head> <m ...

  8. Atitti html5 h5 新特性attilax总结

    Atitti html5 h5 新特性attilax总结 Attilax觉得不错的新特性 3.语义Header和Footer (The Semantic Header and Footer) 8.占位 ...

  9. 使用h5新特性,轻松监听任何App自带返回键

    1.前言 如今h5新特性.新标签.新规范等有很多,而且正在不断完善中,各大浏览器商对它们的支持,也是相当给力.作为前端程序员,我觉得我们还是有必要积极关注并勇敢地加以实践.接下来我将和各位分享一个特别 ...

随机推荐

  1. C#获取当月第一天和最后一天

    当月第一天0时0分0秒: DateTime.Now.AddDays(1 - DateTime.Now.Day).Date 当月最后一天23时59分59秒: DateTime.Now.AddDays(1 ...

  2. SVN入门教程

    1. 什么是SVN SVN全名Subversion,即版本控制系统.SVN与CVS一样,是一个跨平台的软件,支持大多数常见的操作系统. 作为一个开源的版本控制系统,Subversion管理者随时间改变 ...

  3. Minor GC vs Major GC vs Full GC

    http://www.importnew.com/15820.html https://plumbr.io/blog/garbage-collection/minor-gc-vs-major-gc-v ...

  4. Windows10下Docker监控管理工具:Hyper-V管理器

    用Hyper-V管理器监控管理Docker,看到最新的MobyLinuxVM了. 今天启动Docker,出现内存不足的问题,调节内存配置即可.

  5. Ping命令的另一种使用方法

    今天实习结束休息的时候无聊,于是便想看看机房有多少机器,IP是什么,有没有什么小漏洞. 依次使用了netstat.ping.Telnet以后,不小心输入了这样一个东西 当时按下回车以后,心里想的是这样 ...

  6. RocketMQ事务消息实战

    我们以一个订单流转流程来举例,例如订单子系统创建订单,需要将订单数据下发到其他子系统(与第三方系统对接)这个场景,我们通常会将两个系统进行解耦,不直接使用服务调用的方式进行交互.其业务实现步骤通常为: ...

  7. 日常工作: 应用服务器Oracle驱动问题说明

    1. .net使用Oracle驱动的发展等 作为.net线的产品的ERP产品 最初的版本 使用了.net 1.1发布时 微软提供的Oracle的驱动 但是后续微软的.net产品线貌似没有继续发展相应的 ...

  8. Jquery 组 checkbox全选按钮

    <!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...

  9. 微信小程序不能超过十个并发的解决办法

    一般是封装一个请求队列,将请求对象存入队列,在complete写队列的出队操作.

  10. 创建一个规范的django项目

    1. 创建项目 2. 创建static目录及配置 1.创建放css, javascript,img的目录 2.在settings.py中将static绝对路径保存到变量STATICFILES_DIRS ...