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

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

getCurrentPosition:

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

data.coords的属性:

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

watchPostion:

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

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. 第三个Sprint冲刺第七天(燃尽图)

  2. Magazine Ad CodeForces - 803D (二分+贪心)

    The main city magazine offers its readers an opportunity to publish their ads. The format of the ad ...

  3. 自己实现数据结构系列二---LinkedList

    一.先上代码: 1.方式一: public class LinkedList<E> { //节点,用来存放数据:数据+下一个元素的引用 private class Node{ privat ...

  4. JS判断浏览器种类

    function myBrowser() {                        var userAgent = navigator.userAgent; //取得浏览器的userAgent ...

  5. Jquery 组 checkbox全选checkbox

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

  6. 同步工具:CountDownLatch、CyclicBarrier和Semaphore

    1. CountDownLatch 1.1 功能及使用场景 一个同步工具,使得一个或多个线程等待一组线程执行完成后再执行. 使用场景:等待一些前置任务执行完成后,再执行特定的功能.比如,系统启动时,各 ...

  7. Python——多进程

    进程的实例 # -*- coding:UTF-8 -*- import os import time from multiprocessing import Process #进程 def func( ...

  8. C-Lodop回调函数的触发

    高版本的火狐和谷歌不再支持np插件之后,Lodop公司推出了C-Lodop,解决了这些浏览器不能用Lodop插件方式打印的问题,相比较Lodop插件,C-Lodop由于是以服务的形式出现,返回值不能直 ...

  9. matlab中输入x. 与x的区别

    参考:http://www.madio.net/thread-27742-1-1.html 点乘的话,是对应元素相乘. 没点的话,按照矩阵相乘法则进行,这就要求前一个矩阵的列数等于第二个矩阵的行数. ...

  10. Link-Cut Tree(LCT)&TopTree讲解

    前言: Link-Cut Tree简称LCT是解决动态树问题的一种数据结构,可以说是我见过功能最强大的一种树上数据结构了.在此与大家分享一下LCT的学习笔记.提示:前置知识点需要树链剖分和splay. ...