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. 清楚理解const_cast类型转换

    1.任何使用原常量的地方, 已经直接编码到代码中去了.故后续转换类型并不能改变原定义 2.const_cast转换, 是使用了新指针或者引用,指向了原定义的内存,故而可以修改该内存. 使用也得用新指针 ...

  2. ffmpeg 视频 转 gif

    将视频 MP4 转化为 GIF ffmpeg -i small.mp4 small.gif 转化视频中的一部分为 GIF ffmpeg -t -ss :: -i small.webm small-cl ...

  3. java 加密工具类（MD5、RSA、AES等加密方式）

    1.加密工具类encryption MD5加密 import org.apache.commons.codec.digest.DigestUtils; /** * MD5加密组件 * * @autho ...

  4. c——动态数组

    动态数组的实现 #include<stdio.h> #include<stdlib.h> int main(){ int i,n,*a; scanf("%d" ...

  5. 常见模块(五) random模块

    random随机函数中的常用方法 1.random.random 返回一个介于左闭右开[0.0, 1.0)区间的浮点数 print(random.random()) 2.random.randrang ...

  6. cordova热更新插件的使用：cordova-hot-code-push-plugin

    1. 添加插件:cordova plugin add cordova-hot-code-push-plugin 2. 先打开cli,执行命令 npm install -g cordova-hot-co ...

  7. Google - Reconstruct To Chain

    /* 4. 给你一串input,比如: A -> B B -> C X -> Y Z -> X . . . 然后让你设计一个data structure来存这些关系,最后读完了 ...

  8. 安装包安装npm

    在阿里云机器上centos7安装npm可以直接yum安装,然后基于镜像的时候安装不了,直接使用安装包安装,记录一下: 官网下载地址:https://nodejs.org/en/download/ #! ...

  9. zabbix安装、部署、lnmp（一）

    最近入手zabbix,准备好好的研究,好好的弄.   环境准备: mysql:5.6.29 PHP:5.6.12 Nginx:1.8.0 zabbix:3.2.6 操作系统:Centos6 用户:普通 ...

  10. python 常用的模块

    面试的过程中经常被问到使用过那些python模块,然后我大脑就出现了一片空白各种模块一顿说,其实一点顺序也没有然后给面试官造成的印象就是自己是否真实的用到这些模块,所以总结下自己实际工作中常用的模块: ...