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. ArcMap 图层无法编辑

    原因一.图层被其他程序占用 解决方法:关闭与之相关的程序与服务 原因二.没有开启编辑 解决方法:打开编辑器工具>>选项>>版本管理>>勾选或取消勾选编辑数据库版本并 ...

  2. https原理及其中所包含的对称加密、非对称加密、数字证书、数字签名

    声明:本文章已授权公众号Hollis转载,如需转载请标明转载自https://www.cnblogs.com/wutianqi/p/10654245.html(安静的boy) 一.为什么要使用http ...

  3. NOIP2012 Day1 T2国王游戏 洛谷P1080

    第一篇博客啊…… 由于我太弱了,还要去补不全的知识点准备参加人生第一次NOIp,所以第一篇博客就简短一点好了(偷懒就直说吧……) 洛谷P1080传送门 题意概括: 有N对数ai和bi,以及两个数a0和 ...

  4. 基于Jmeter的 性能测试

    目标:对南通大学计算机学院网站开展性能测试:(url:http://cs.ntu.edu.cn/) 首先下载jmeter的zip压缩包,解压后进入bin目录,由于我使用的系统是win10,所以要双击执 ...

  5. asp.net IE11 dopostback is null or undefined 为空或未定义

    个人认为这个问题一般是未按规范书写导致,但懒人嘛就有懒办法. 页面重构一般可以解决此问题,但是对于不便重写的情形,这里仍然有一个解决办法. 解决方法: 1.将文件ie11.browser拷贝到C:\W ...

  6. webpack 中，module、chunk、bundle 的区别（待补充）

    项目 区别 module 是开发中的单个模块 chunk 中文意思是"块",是指 webpack 在进行模块依赖分析的时候,代码分割出来的代码块 bundle

  7. 十七、springcloud(三)服务的注册与调用

    1.启动服务注册中心Eureka(见上篇) 启动成功后,暂时无服务 2.项目框架 3.创建服务提供者(spring-cloud-houge-provider)jar a.application.pro ...

  8. 阿里云centos5升级yum源为6

    升级后出现Errno -3] Error performing checksum 需要安装 python-hashlib Python 2.4 安装 hashlib 2012年11月13日 14:29 ...

  9. Excel--按内容分页打印

    当我们有这样一张表,需要按不同城市分页打印,每页带标题行,可按以下步骤:1.点击城市一列任一单元格,点击“开始”——>“排序和筛选”(升序): 2.点击“数据”-->“分类汇总”: 分类字 ...

  10. read()、write()返回 Input/output error, Device or resource busy解决

    遇到的问题,通过I2C总线读.写(read.write)fs8816加密芯片,报错如下: read str failed,error= Input/output error! write str fa ...