H5新特性之geolocation
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的更多相关文章
- H5新特性汇总
H5新特性: 新增选择器 document.querySelector.document.querySelectorAll 拖拽释放(Drag and drop) API 媒体播放的 video 和 ...
- H5新特性---SVG--椭圆--直线--文本--滤镜(高斯滤镜--模糊)--地理定位
今天的目标 3.1:h5新特性--SVG--椭圆 <ellipse rx="" ry="" cx="" cy="" ...
- H5新特性--WebStorage--WebSocke
今天的目标 3.2:h5新特性--WebStorage localStorage 在客户端浏览器保存数据 永久保存 保存数据 localStorage [key] = value 保存数据 loca ...
- H5新特性---Web Worker---Web Stroage
今天的目标 3.1:h5新特性八--Web Worker---代码就3行 程序:program 存储在外存(磁盘)中代码 进程:Process/Task 将程序调用内存中,分配空间 线程:Thread ...
- H5新特性——--第三方绘图工具库 echarts(canvas)---SVG绘图
今天学习的内容 3.1:h5新特性---第三方绘图工具库 echarts(canvas) 百度 echarts;d3;two.js;.... 3.2:h5新特性---SVG绘图 3.2:h5新特性-- ...
- H5新特性-视频,音频-Flash-canvas绘图
json格式 json - > AJAX json:数据格式,通常是以字符串形式表示 对象 {"name":"james","age" ...
- H5新特性实现对class的增删改
直接撸代码 全靠死记硬背 没什么技术点 HTML部分 <!DOCTYPE html> <html lang="en"> <head> <m ...
- Atitti html5 h5 新特性attilax总结
Atitti html5 h5 新特性attilax总结 Attilax觉得不错的新特性 3.语义Header和Footer (The Semantic Header and Footer) 8.占位 ...
- 使用h5新特性,轻松监听任何App自带返回键
1.前言 如今h5新特性.新标签.新规范等有很多,而且正在不断完善中,各大浏览器商对它们的支持,也是相当给力.作为前端程序员,我觉得我们还是有必要积极关注并勇敢地加以实践.接下来我将和各位分享一个特别 ...
随机推荐
- ajax多级菜单栏
1.jsp 首先ajax查询数据 <script type="text/javascript"> function targetlist() { $.ajax({ ur ...
- idea使用优化
一.idea设置目录说明 1.bin目录包含我们的启动文件.虚拟机配置信息和idea属性信息等 2.help目录:帮助文档 3.jre64 : idea自带的jre环境 4.lib:idea所依赖的类 ...
- SQL Server 2016以上版本大小写敏感的解决办法
alter database IovData set Single_user alter database IovData COLLATE Chinese_PRC_CI_AS alter databa ...
- 自己实现数据结构系列二---LinkedList
一.先上代码: 1.方式一: public class LinkedList<E> { //节点,用来存放数据:数据+下一个元素的引用 private class Node{ privat ...
- A glance for agile method
看看Apache最新的JIRA,新版的JIRA是有Agile模块的. Scrum早有耳闻,接触得也比较多,Kanban一次面试中提到过.今日深入查阅KanBan: http://www.agilewe ...
- Mind Manager X 10 registry backup key under windows XP
Windows Registry Editor Version 5.00 [HKEY_CURRENT_USER\Software\Mindjet\MindManager\10] [HKEY_CURRE ...
- CentOS下使用VirtualBox 安装 Windows虚拟机的简单方法
1.物理服务器安装CentOS7.5 2. 安装VNC 3. 关闭防火墙,关闭selinux,上传virtualbox的rpm包. http://download.virtualbox.org/vir ...
- Ajax 新建对象
XMLHttpRequest对象是Ajax的基础,用于后台与服务器进行数据交互. 新的浏览器支撑XMLHttpRequest,而旧的浏览器不支持. var vari; if(window.XMLHtt ...
- 【gridview增删改查】数据库查询后lodop打印
ASP.NET中使用gridview可以很容易的把需要的数据动态显示在前台,还可以在表格里加入列进行增删改查,每次点击的时候重新加载数据,gridview也提供了分页等功能,还有一些模版让显示在前台的 ...
- Nginx referer防盗链模块
L75 referer模块 ngx_http_referer_module 默认编译进nginx valid_referers 指令 Syntax: valid_referers none | blo ...