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. svn 使用教程

    一.什么是SVN SVN是Subversion的简称,是一个开放源代码的版本控制系统,相较于RCS.CVS,它采用了分支管理系统,它的设计目标就是取代CVS. 二.SVN的下载安装 下载地址:http ...

  2. A11-java学习-二维数组-面向对象概念-类的编写-测试类的编写-创建对象-使用对象-递归

    二维数组的内存结构和使用 引用类型的内存结构 栈区.堆区.方法区.数据栈等内存分析和介绍 面向对象.面向过程区别和发展 类型的定义 引用类型.值类型 预定义类型和自定义类型 类型与对象(实例) 对象的 ...

  3. OneZero产品视频

    产品视频地址:http://v.youku.com/v_show/id_XMTU1MDMwOTk2OA==.html

  4. calico实现docker容器内部的网络链接

    calico官网 https://www.projectcalico.org// calico介绍 http://www.sdnlab.com/17161.html calico网络 环境 系统   ...

  5. js 算數(Math)對象

    算數對象不需要聲明,可以直接使用, Math對象方法及作用: round()四捨五入: random()生成0到1的隨機數: max()選擇較大的數: min()返回較小的數:

  6. flask再学习-思考之怎么从数据库中查询数据在页面展示!

    看别人视频觉得很简单,要自己做蒙蔽了!这样子.NO! 1. 流程: 首先要有和数据库连接的驱动!一般有PYMySQL mysqlclient 等 使用扩展Flask-SQLAlchemy 获得orm对 ...

  7. HDU4409-LCA模拟

    给一个家谱,回答给的操作结果. 1)L 按照字典序排序儿子,输出整个家谱. 2)b 求出所给name的所有兄弟. 3)c 求出两个name的LCA 读入数据时,我用一个curfather数组维护固定深 ...

  8. ef group 封装

    表达式树,传递 group public class Test<T> where T : class { MoviesEntities db = new MoviesEntities(); ...

  9. Bicriterial routing 双调路径 HYSBZ - 1375(分层最短路)

    Description 来越多,因此选择最佳路径是很现实的问题.城市的道路是双向的,每条道路有固定的旅行时间以及需要支付的费用.路径由连续的道路组成.总时间是各条道路旅行时间的和,总费用是各条道路所支 ...

  10. JavaScript 隐式类型转换

    JavaScript 隐式类型转换 原文:https://blog.csdn.net/itcast_cn/article/details/82887895 · 1.1 隐式转换介绍 · 1.2 隐式转 ...