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新特性.新标签.新规范等有很多,而且正在不断完善中,各大浏览器商对它们的支持,也是相当给力.作为前端程序员,我觉得我们还是有必要积极关注并勇敢地加以实践.接下来我将和各位分享一个特别 ...
随机推荐
- 《Linux内核分析》读书笔记(四章)
<Linux内核分析>读书笔记(四章) 标签(空格分隔): 20135328陈都 第四章 进程调度 调度程序负责决定将哪个进程投入运行,何时运行以及运行多长时间,进程调度程序可看做在可运行 ...
- BugPhobia进阶篇章:功能规格说明书
0x01 :特别鸣谢 首先特别鸣谢<构建之法>中并没有给出固定化格式的功能规格说明书的样例,因此在此次的说明书中将尽可能用生动形象的例子展示软件交互阐释 因此受到它本身的启发,此次团队功能 ...
- 个人作业 - Week3 - 案例分析
调研与评测 真实用户采访: 用户姓名: 刘斯盾 用户的背景和需求: 用户是一位计算机专业学生,需要浏览技术博客来扩充自己的学识. 用户使用博客园证明: 产品是否解决用户问题: 在码代码过程中遇到的很多 ...
- 自己实现数据结构系列一---ArrayList
1.先上代码: public class ArrayList<E> { private E[] data; private int size; /** * 构造方法,初始化容量capaci ...
- Spring基础之 反射(Reflection)
1.了解Class package com.inspire.reflection.Class_api; import java.lang.reflect.Constructor; import jav ...
- shell脚本--输入与输出
输出带有转义字符的内容 单独一个echo表示一个换行 使用echo输出时,每一条命令之后,都默认加一个换行:要想取消默认的换行,需要加 -n 参数. #!/bin/bash #文件名:test.sh ...
- Notepad++ 大小写转换
code_field_text 普通文本 code_field_user_id 用户ID code_field_customer_id 客户ID code_field_dict 数据字典 code_f ...
- 原生js作用域(红宝书)
function fn(){ ; alert(a); // 2; } alert(a);//未被定义: alert(b);//全局变量:b=2: ; function fn1(){ ; functio ...
- [转载]oracle 高水位线详解
一.oracle 高水位线详解 出处: https://www.cnblogs.com/linjiqin/archive/2012/01/15/2323030.html 一.什么是水线(High Wa ...
- session存入redis
Session信息入Redis Session简介 session,中文经常翻译为会话,其本来的含义是 指有始有终的一系列动作/消息,比如打电话时从拿起电话拨号到挂断电话这中间的一系列过程可以称之为一 ...