炫意html5
最早CSS3和HTML5移动技术网站之一

Cordova设备方向

指南针是用来显示相对于地理北极的基本点的方向。

第1步 – 安装设备的方向插件

打开命令提示符窗口,并运行以下命令。
C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-device-orientation

第2步 – 添加按钮

如果你有学习我们前面教程,你可能会注意到,这个插件它类似于加速度插件。我们在本教程中使用的是同一个概念。让我们在 index.html 文件中创建两个按钮

<button id = "getOrientation">GET ORIENTATION</button>
<button id = "watchOrientation">WATCH ORIENTATION</button>

第3步 – 添加事件监听器

现在,我们将在index.js中的 onDeviceReady函数内部添加事件侦听器。
document.getElementById("getOrientation").addEventListener("click", getOrientation);
document.getElementById("watchOrientation").addEventListener("click", watchOrientation);

第4步 – 创建函数

我们将创建两个函数,一个来获取当前加速度,另外一个用来监视方向的变化。可以看到再次使用频率选项,因为我们希望每三秒钟观察其变化。

function getOrientation(){
navigator.compass.getCurrentHeading(compassSuccess, compassError);
function compassSuccess(heading) {
alert('Heading: ' + heading.magneticHeading);
};
function compassError(error) {
alert('CompassError: ' + error.code);
};
}
function watchOrientation(){
var compassOptions = {
frequency: 3000
}
var watchID = navigator.compass.watchHeading(compassSuccess, compassError, compassOptions);
function compassSuccess(heading) {
alert('Heading: ' + heading.magneticHeading);
setTimeout(function() {
navigator.compass.clearWatch(watchID);
}, 10000);
};
function compassError(error) {
alert('CompassError: ' + error.code);
};
} 

由于指南针插件几乎与加速度插件是一样的,这次我们告诉你错误代码。一些设备不具有指南针工作所需要的磁传感器。如果您的设备没有,会得到下面的错误。

炫意HTML5 » Cordova设备方向

Java基础教程Android基础教程