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. 2017-2018-2 1723《程序设计与数据结构》第八周作业 & 实验二 & 第一周结对编程 总结

    作业地址 第八周作业:https://edu.cnblogs.com/campus/besti/CS-IMIS-1723/homework/1847 (作业界面已评分,可随时查看,如果对自己的评分有意 ...

  2. 个人git链接和git学习心得总结

    个人git链接和git学习心得总结 个人git链接: https://github.com/hanzhaoyan Git 是 Linux 的创始人 Linus Torvalds 开发的开源和免费的版本 ...

  3. 第三个Sprint ------第八天

    四则运算APP开发基本完成! PC端运行结果截图 移动端(华为手机)测试截图 总结:通过这次课程设计,我体会到团队协作的重要性,也体会到了理论联系实际的意义.做一件事,要坚持不懈,不能半途而废!

  4. 实例详解Java中如何对方法进行调用

    原文源自http://www.jb51.net/article/73827.htm 方法调用Java支持两种调用方法的方式,根据方法是否返回值来选择. 当程序调用一个方法时,程序的控制权交给了被调用的 ...

  5. Visual Studio 2017 社区版的安装与组件修改(C++)

    0. 环境描述 需求:用VS2017做C++简易开发. 操作系统:Windows 8.1. 1. 下载 MSDN下载VS2017社区版. https://msdn.itellyou.cn/ 下载后: ...

  6. FileUtils功能概述

    https://commons.apache.org/proper/commons-io/javadocs/api-release/org/apache/commons/io/FileUtils.ht ...

  7. python 深入浅出装饰器(decorator)--举的例子关于星级争霸2(starcraft2)

    其实早就想写一篇深入浅出装饰器的文章,苦于一直没有找到很好的例子描述,自己除了在写api参数检测和日志打印的时候用到以外,其他地方也没有什么重度使用所以一直没有写. 我不会讲解装饰器的理论,还有各种基 ...

  8. spring cloud实战与思考(五) JWT之携带敏感信息

    需求: 需要将一些敏感信息保存在JWT中,以便提高业务处理效率. 众所周知JWT协议RFC7519使用Base64Url对Header和Payload的Json字符串进行编解码.A JWT is re ...

  9. Scala常用命令

    :q    退出控制台 控制台换行    空格 + 回车

  10. docker--命令详解

    查看版本: docker --version 查看docker信息: docker info 进入容器: docker exec -it bb /bin/bash #在容器中执行一个bash可以操作容 ...