geolocation

window.navigator.geolocation

1、getCurrentPosition() // 获取当前的位置信息

2、watchPosition() // 监视位置变化，和1参数一样

3、clearWatch() // 清除位置监视

1、getCurrentPosition(s, e, p)

success回调 (必须)

error回调

options参数

需要翻墙

// 特别注意，chrome需要在连上vpn的时候才能获取到

var success = function (pos)

{

console.log(pos);

};

// 只传一个参数

window.navigator.geolocation.getCurrentPosition(success);

Geoposition对象

Geoposition对象属性

latitude 纬度

longitude 经度

altitude 海拔

accuracy 定位精准度，单位m

altitudeAccuracy 海拔精准度，单位m

heading 方向

speed 速度

https://dev.w3.org/geo/api/spec-source.html#coordinates_interface

PositionError对象

用户拒绝 code = 1

获取不到 code = 2

连接超时 code = 3

https://dev.w3.org/geo/api/spec-source.html#position_error_interface

配置参数

enableHighAccuracy 是否需要高精度位置默认false

timeout 单位ms 请求超时时间 默认infinity

maximumAge 单位ms，watchPosition方法则不停地取用户的地理位置信息，不停地更新用户的位置信息。位置信息过期时间 设置为0就无条件获取新的地理位置信息 默认0

https://dev.w3.org/geo/api/spec-source.html#position_options_interface

watchPosition

var id = geolocation.watchPosition(fu) 用于注册监听器，在设备的地理位置发生改变的时候自动被调用。

参数与 getCurrentPosition 相同

clearWatch(id) 使用 clearWatch 清除监听

devicemotion监听加速度变化

window.addEventListener('devicemotion', function(event)

{ console.log(event); }

);

devicemotion事件所包含的属性

1.accelerationIncludingGravity （包括重心引力,z轴方向加了9.8,在x,y方向上的值两者相同）重力加速度

2.acceleration 重力加速度 （需要陀螺仪支持）

3.rotationRate(alpha, beta, gamma)旋转速率

4.interval // 获取的时间间隔     均为只读属性

微信摇一摇

微信摇一摇，通过服务器（wampmanager）打开网页，window+r（快捷方式）打开cmd，输入ipconfig，找到 Ipv4 的地址，如下：

将localhost改成 Ipv4 的值，将改后的网址用草料二维码生成器扫码到手机上显示  （手机和电脑应在同一局域网下）

</head>

    <div id = "demo"></div>

<body>

    <script>

       var speed = 25;

       var lastTime = 0;

       var lastX = 0; lastY = 0; lastZ = 0;

       window.addEventListener('devicemotion',function(event){

          console.log(event);

          demo.innerHTML = 'acceleration-x' + event.acceleration.x + '<br/>y:' + event.acceleration.y + '<br/>z:' + event.acceleration.z + '<br/>'

                           + 'accelerationIncludingGravity-x' + event.accelerationIncludingGravity.x + '<br/>y:' + event.accelerationIncludingGravity.y + '<br/>z:' + event.accelerationIncludingGravity.z

          var x = event.acceleration.x;

          var y = event.acceleration.y;

          var z = event.acceleration.z;

          var nowTime = (new Date()).getTime();

          if(nowTime - lastTime > 500){

             lastTime = nowTime;

              if(Math.abs(x - lastX) > speed || Math.abs(y-lastY) > speed || Math.abs(z-lastZ) > speed){

                 alert('摇一摇');

                 lastX = x;

                 lastY = y;

                 lastZ = z;

              }

          }

       });

  </script>

</body>

deviceorientation监听设备在方向上的变化

window.addEventListener(‘deviceorientation’, function(event){
console.log(event);
});
deviceorientation事件所包含的属性

1.alpha 表示设备沿z轴上的旋转角度，范围为0~360。

2.beta 表示设备在x轴上的旋转角度，范围为-180~180。它描述的是设备由前向后旋转的情况。

3.gamma 表示设备在y轴上的旋转角度，范围为-90~90。它描述的是设备由左向右旋转的情况。

      window.addEventListener('deviceorientation', function(e){

       demo.innerHTML = 'alpha :' + e.alpha + '<br/>'

                       + 'beta :' + e.beta + '<br/>'

                       + 'gamma :' + e.gamma + '<br/>'

      },false);

4、webkitCompassHeading：与正北方向的角度差值。正北为0度，正东为90度，正南为180度，正西为270度。因为0度是正北，所以叫指北针。

5、webkitCompassAccuracy：指北针的精确度，表示偏差为正负多少度。一般是10。

H5地理位置信息、微信摇一摇的更多相关文章

  1. 前端笔记之微信小程序（四）WebSocket&Socket.io&摇一摇案例&地图|地理位置

    一.WebSocket概述 http://www.ruanyifeng.com/blog/2017/05/websocket.html Workerman一款开源高性能异步PHP socket即时通讯 ...

  2. H5进阶篇--实现微信摇一摇功能

    在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientat ...

  3. C#开发微信门户及应用(38)--微信摇一摇红包功能

    摇一摇周边红包接口是为线下商户提供的发红包功能.用户可以在商家门店等线下场所通过摇一摇周边领取商家发放的红包.我曾经在<C#开发微信门户及应用(28)--微信“摇一摇·周边”功能的使用和接口的实 ...

  4. 蓝牙Ibeacon室内定位和微信摇一摇周边原理分析

    苹果推出Ibeacon室内定位技术是为了弥补GPS无法覆盖室内定位这种场景.苹果意味着创新,在其推动下,蓝牙Ibeacon得到了极大的应用.而腾讯则是利用蓝牙Ibeacon在场景体验方面进行了创新,实 ...

  5. C#开发微信门户及应用(28)--微信“摇一摇·周边”功能的使用和接口的实现

    ”摇一摇周边“是微信提供的一种新的基于位置的连接方式.用户通过“摇一摇”的“周边”页卡,可以与线下商户进行互动,获得商户提供的个性化的服务.微信4月份有一个赠送摇一摇设备的活动,我们有幸获得赠送资格, ...

  6. （实用篇）php官方微信接口大全（微信支付、微信红包、微信摇一摇、微信小店）

    微信入口绑定,微信事件处理,微信API全部操作包含在这些文件中.内容有:微信摇一摇接口/微信多客服接口/微信支付接口/微信红包接口/微信卡券接口/微信小店接口/JSAPI <?php class ...

  7. js html5 仿微信摇一摇

    看微信摇一摇之后忽然想知道他是怎么写的.于是就在网上查了一些资料,有些是借鉴别人的.大家共同学习啊 先放代码 <body onload="init()"> <p& ...

  8. 微信小程序实例-摇一摇抽奖

    概述 前面我们讲了如何开始微信小程序搭建和一些组件的介绍.微信小组件和微信小程序入门 微信小程序目录 为了更好的理解小程序和小程序开发,我们首先来看一下项目的目录. 首先看下根目录下的app.json ...

  9. 用vue 写h5页面-摇一摇

    vue配合其他ui框架除了开发一个完整的web项目外,也有不少的项目做一些h5的活动页面开发.你的页面现在需要模拟微信的摇一摇动作. 项目环境: vue-cli 完成的一个项目 准备插件(包):依赖的 ...

随机推荐

  1. Python if语句

    a=99 b=input("请输入一个数字:") int(b) if a >b: print("欢迎来到Python") eilf a=b: print( ...

  2. macbook 下hadoop伪分布式安装

    1 准备原材料 1.1  jdk 1.8.0_171(事先安装并配置环境变量HAVA_HOME,PATH) 1.2 Hadoop 2.8.3 2 免密登陆配置(否则安装过程需要不断输入密码) 2.1 ...

  3. ARTIFICIAL INTELLIGENCE FOR GAMES (Ian Millington / John Funge 著)

    相关网站:http://www.ai4g.com PART I AI AND GAMESCHAPTER1 INTRODUCTIONCHAPTER2 GAME AIPART II TECHNIQUESC ...

  4. HTTPS协议加密原理解析

    用 HTTP 协议,看个新闻还没有问题,但是换到更加严肃的场景中,就存在很多的安全风险.例如你要下单做一次支付,如果还是使用普通的 HTTP 协议,那你很可能会被黑客盯上. 比如,你发送一个请求,说我 ...

  5. PhpAdmin支持登录远程数据库服务器

    转载:http://www.cnblogs.com/andydao/p/4227312.html 该数据,百度搜不到,Google1分钟搞定 一.如何设置phpMyAdmin自动登录? 首先在根目录找 ...

  6. 对pytorch中Tensor的剖析

    不是python层面Tensor的剖析,是C层面的剖析. 看pytorch下lib库中的TH好一阵子了,TH也是torch7下面的一个重要的库. 可以在torch的github上看到相关文档.看了半天 ...

  7. cookie.js插件

    /*! cookiejs v1.0.23 | MIT (c) 2018 kenny wong | https://github.com/jaywcjlove/cookie.js */!function ...

  8. Sqluldr2 libclntsh.so报错处理

    Sqluldr2 libclntsh.so报错处理 处理报错 [oracle@oracledg tmp]$ ./sqluldr2linux64.bin ./sqluldr2linux64.bin: e ...

  9. js基础系列之【原型和原型链】

    声明:形成本文的出发点仅仅是个人总结记录,避免遗忘,并非详实的教程:文中引用了经过个人加工的其它作者的内容,并非原创.学海无涯 引入问题 一般我们是这样写的: (需求驱动技术,疑问驱动进步) // 构 ...

  10. Docker基本命令与使用 —— Docker容器的网络连接（四）

    一.Docker容器的网络基础 通过ifconfig查看docker0的网络设备,docker守护进程就是通过docker0为docker的容器提供网络连接的各种服务. docker0是Linux虚拟 ...