phonegap 的指南针 api Compass
一、 Compass 介绍方法参数
1、Compass 也就是,常说的指南针,又叫罗盘
2、方法
compass.getCurrentHeading
compass.watchHeading
compass.clearWatch
compass.watchHeadingFilter (obsolete) 1.6版本以上不支持
compass.clearWatchFilter (obsolete) 1.6版本以上不支持
3、参数
compassSuccess compassError
compassOptions compassHeading
二、 compass.getCurrentHeading 对象 主要获取罗盘的当前朝向。
1、navigator.compass.getCurrentHeading(compassSuccess, compassError, compassOptions);
compassSuccess 成功的回调函数
compassError 失败的回调函数
compassOptions 获取指南针信息时的一个选项例如:频率,它一般为一个 json 对象在 (compass.watchHeading)中用
2、回调成功后会用到 compassHeading 对象
magneticHeading:罗盘在某一时刻的朝向,取值范围是 0 - 359.99 度。(数字类型)
trueHeading:罗盘在某一时刻相对于北极的朝向,取值范围是 0 - 359.99 度。如果是负 值则表明该参数不确定。(数字类型)
headingAccuracy:实际度数(magneticHeading)和记录度数(trueHeading)之间的偏差。(数字类型)
timestamp:确定罗盘朝向的时刻.。(毫秒数)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>phonegap_device_network_notification01</title>
<link href="../jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>
<script src="../jquery.js" type="text/javascript"></script>
<script src="../jquery.mobile-1.3.2.js" type="text/javascript"></script>
<script src="../cordova.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8"> // 等待Cordova加载
document.addEventListener("deviceready", onDeviceReady, false); // Cordova加载完成
function onDeviceReady() {
$('#getCurrentHeading').click(function(){
navigator.compass.getCurrentHeading(onSuccess, onError);
}) }
function onSuccess(heading){
alert('Heading: ' + heading.magneticHeading);
}
function onError(compassError) {
alert('Compass Error: ' + compassError.code);
}
</script> </head>
<body>
<div data-role="page">
<div data-role="header">
<h1>PhoneGap100实战</h1>
</div>
<div data-role="content">
<h1>指南针例子</h1>
<a href="#" data-role='button' id="getCurrentHeading">点击获取当前的朝向</a>
<p>getCurrentHeading</p>
</div>
<div data-role="footer">
<h4> </h4>
</div>
</div> </body>
</html>
三、 compass.watchHeading 对象
1、罗盘是一个检测设备方向或朝向的传感器,使用度作为衡量单位,取值范围从 0 度到 359.99 度。
2、compass.watchHeading 每隔固定时间就获取一次设备的当前朝向。每次取得朝向后,headingSuccess 回调函 数会被执行。
3、通过 compassOptions 对象的 frequency 参数可以设定以毫秒为单位的时间间隔。
4、返回的 watch ID 是罗盘监视周期的引用,可以通过 compass.clearWatch 调用该 watch ID 以停止对罗盘的监 视。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>phonegap_device_network_notification01</title>
<link href="../jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>
<script src="../jquery.js" type="text/javascript"></script>
<script src="../jquery.mobile-1.3.2.js" type="text/javascript"></script>
<script src="../cordova.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8"> // 等待Cordova加载
document.addEventListener("deviceready", onDeviceReady, false);
var watchID='';
// Cordova加载完成
function onDeviceReady() {
$('#getCurrentHeading').click(function(){
var options = { frequency: 3000 };
watchID = navigator.compass.watchHeading(onSuccess, onError, options); });
$('#stopWatch').click(function(){
stopWatch();
}) }
function onSuccess(heading){
var element = document.getElementById('heading');
element.innerHTML = 'Heading: ' + heading.magneticHeading;
}
function onError(compassError) {
alert('Compass Error: ' + compassError.code);
}
//stop
function stopWatch(){
if(watchID){
navigator.compass.clearWatch(watchID);
watchID='';
}
}
</script> </head>
<body>
<div data-role="page">
<div data-role="header">
<h1>PhoneGap100实战</h1>
</div>
<div data-role="content">
<h1>指南针例子</h1>
<a href="#" data-role='button' id="getCurrentHeading">点击获取当前的朝向</a>
<a href="#" data-role='button' id="stopWatch">停止获取当前的朝向</a>
<p id="heading">还没有获取</p>
</div>
<div data-role="footer">
<h4> </h4>
</div>
</div> </body>
</html>
四、综合案例说明
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>phonegap_device_network_notification01</title>
<link href="../jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>
<script src="../jquery.js" type="text/javascript"></script>
<script src="../jquery.mobile-1.3.2.js" type="text/javascript"></script>
<script src="../cordova.js" type="text/javascript"></script>
<style>
#main{
height:300px;
position:relative;
}
#compassDiv{
position:absolute;
top:30px;
}
#northDiv{
position:absolute;
top:116px;
left:142px;
z-index:2;
-webkit-transform:rotate(60deg);
}
</style>
<script type="text/javascript" charset="utf-8"> // 等待Cordova加载
document.addEventListener("deviceready", onDeviceReady, false);
var watchID='';
// Cordova加载完成
function onDeviceReady() { var options = { frequency: 300 };
watchID = navigator.compass.watchHeading(onSuccess, onError, options); }
function onSuccess(heading){
var element = document.getElementById('northDiv');
var now_heading=heading.magneticHeading;
element.style.webkitTransform = 'rotate('+now_heading+"deg)";
$('#heading').text("当前的朝向"+now_heading); }
function onError(compassError) {
alert('Compass Error: ' + compassError.code);
} </script> </head>
<body>
<div data-role="page">
<div data-role="header">
<h1>PhoneGap100实战</h1>
</div>
<div data-role="content">
<div id='main'>
<div id="northDiv"><img src="../images/antique_needle.png"/></div>
<div id="compassDiv"><img src="../images/antique_compass.png" width="300" height="300" /></div>
</div>
</div>
<div data-role="footer">
<div id="heading">正在获取朝向...</div>
</div>
</div> </body>
</html>
phonegap 的指南针 api Compass的更多相关文章
- 小白学phoneGap《构建跨平台APP:phoneGap移动应用实战》连载一(PhoneGap中的API)
之前本博连载过<构建跨平台APP:jQuery Mobile移动应用实战>一书.深受移动开发入门人员的喜爱. 从如今開始,连载它的孪生姐妹书phoneGap移动应用实战一书,希望以前是小白 ...
- phonegap的照相机API
1. Camera Api简单介绍 2. 拍照 3. 预览照片 一. Camera Api简单介绍 Camera选择使用摄像头拍照,或从设备相册中获取一张照片.图片以base64编码的 字符串或图片U ...
- phonegap的照相机 API
一. Camera Api 简单介绍 Camera 选择使用摄像头拍照,或从设备相册中获取一张照片.图片以 base64 编码的 字符串或图片 URI 形式返回. 方法: 1. camera.getP ...
- PhoneGap 的文件 api
一. 文件系统的请求 请求文件系统通过 window.requestFileSystem 来完函数声明如下: window.requestFileSystem(type, size, successC ...
- Phonegap中自定义插件的使用
在phonegap中需要实现特定相关的功能,可能需要自定义扩展一下功能,那么扩展phonegap组件就成为了可能. 源代码结构图: 本文目的在于讲述怎么扩展一个phonegap组件以及实现. 针对ph ...
- 29、phonegap入门
0. PhoneGap介绍 0.1 什么是PhoneGap? PhoneGap是一个基于HTML.CSS.JS创建跨平台移动应程序的快速开发平台.与传统Web应用不同的是,它使开发者能够利用iPho ...
- microbit之mpython的API
附录:常用API函数汇总 一.显示 display.scroll("Hello, World!") 在micro:bit点阵上滚动显示Hello, World!,其中Hello, ...
- 新手的第一个phonegap Android应用
对PhoneGap开发感兴趣的请加入群 PhoneGap App开发 348192525 手机成为现在软件应用必不可少的一种设备,然而手机平台的不统一造成我们需要为不同手机重写代码,这对一般应用来 ...
- 构建通过 Database.com 提供技术支持的 PhoneGap 应用程序
要求 其他必要产品 Database.com account 用户级别 全部 必需产品 PhoneGap Build 范例文件 Database.Com-PhoneGap-Sample 在这篇文章中, ...
随机推荐
- 如何优雅的封装一个DOM事件库
1.DOM0级事件和DOM2级事件 DOM 0级事件是元素内的一个私有属性:div.onclick = function () {},对一个私有属性赋值(在该事件上绑定一个方法).由此可知DOM 0级 ...
- WEB下渗透测试经验技巧(全)[转载]
Nuclear’Atk 整理的: 上传漏洞拿shell: 1.直接上传asp.asa.jsp.cer.php.aspx.htr.cdx….之类的马,拿到shell.2.就是在上传时在后缀后面加空格或者 ...
- 编译器错误消息: CS0012: 类型“System.Object”在未被引用的程序集中定义。必须添加对程序集“System.Runtime, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a”的引用。
编译器错误消息: CS0012: 类型“System.Object”在未被引用的程序集中定义.必须添加对程序集“System.Runtime, Version=4.0.0.0, Culture=neu ...
- Expression Blend实例中文教程(12) - 样式和模板快速入门Style,Template
在上一篇,介绍了Visual State Manager视觉状态管理器,其中涉及到控件的样式(Style)和模板(Template),本篇将详细介绍样式(Style)和模板(Template)在Sil ...
- 七、集成swagger2
1.添加依赖 <!-- swager2 --> <dependency> <groupId>io.springfox</groupId> <art ...
- Error:Execution failed for task ':app:processAnzhiDebugAndroidTestResources'. > No slave process to process jobs, aborting
环境 Android Studio 3.0 错误 Error:Execution failed for task ':app:processAnzhiDebugAndroidTestResources ...
- Linux必会必知
一.前言 Linux作为一个开源系统,被极客极力推崇,作为程序员不来了解一下,那就亏了 Linux是一种自由和开放源代码的类UNIX操作系统.该操作系统的内核由林纳斯·托瓦兹在1991年10月5日首次 ...
- JRebel&XRebel
介绍==>>>> JRebel&XRebel官网 https://zeroturnaround.com/HotSwap和JRebel原理 http://www.holl ...
- Oracle自定义函数&加密
在sql中频繁使用的功能(逻辑.加密等)可以写成自定义函数进行封装,之后再调用即可. CREATE OR REPLACE FUNCTION "函数名" (参数名 参数类型 参数数据 ...
- Java多线程系列--CopyOnWriteArraySet
转载:http://www.cnblogs.com/skywang12345/p/3498497.html 概要 本章是JUC系列中的CopyOnWriteArraySet篇.接下来,会先对CopyO ...