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 实现简易 Shell

    什么是shell? (1)shell是一个系统软件,负责用户和操作系统内核之间的交互,是产生进程的进程(通过linux系统调用fork,exec),主要负责解释用户的命令,进而实现用户对进程的控制. ...

  2. cocos2dx创建win32项目一般步奏

    1.导入一个新项目步奏:解决方案:右键->添加->添加现有项目->添加依赖项目libCocoStudioD:\work\CannonDefender\cocos2d\cocos\ed ...

  3. 推荐一些关于学习Html Css和Js的书吗？

    前端易学易懂,随着移动互联网的日益兴起,it行业对于前端的需求也在不断的提高,那么从前端小白修炼成为前端大神的这个过程之中,一些必备的枕边书也是必不可少的. 第一本,入门<Head first ...

  4. 集合总结一(ArrayList的实现原理)

    一.概述 一上来,先来看看源码中的这一段注释,我们可以从中提取到一些关键信息: Resizable-array implementation of the List interface. Implem ...

  5. SVN 撤回已提交的代码

    1. TortoiseSVN -----> Show log 2.右键点击你想撤回的提交 -> Revert changes from this revision ----->Rev ...

  6. 实战 ant design pro 中的坑

    1.替换mock数据: 1.将:.roadhogrc.mock.js 中的代理模式替换 当不使用代理的时候就会将所有 /api/的链接换成 http://localhost:8080/ export ...

  7. JsonPath 使用

      Map<String, String> map ----> $.store.bicycleString str = $.store.otherList<Map<Str ...

  8. Azure CosmosDB (2) CosmosDB中的数据一致性

    <Windows Azure Platform 系列文章目录> 为了保证分布式数据库的高可用性和低延迟性,我们需要在可用性.延迟和吞吐量之间进行权衡. 绝大部分的商业分布式数据库,要求开发 ...

  9. hadoop 安装过程记录

    1)首先配置好了四个linux虚拟机 root pwd:z****l*3 关闭了防火墙 开通了 sshd服务 开通了 ftp服务 配置了 jdk 1.8 配置好了互信 (之前配置的过程忘了!--检查了 ...

  10. zabbix官网不能访问的问题

    zabbix 3.4官方文档 https://www.zabbix.com/documentation/3.4/zh/start zabbix官网不能访问 一开始以为运营商限制就切换运营商发现 电信可 ...