本节书摘来自异步社区《PhoneGap移动应用开发手册》一书中的第1章，第1.8节创建可视化罗盘显示设备的移动方向，作者 【英】Matt Gifford，更多章节内容可以访问云栖社区“异步社区”公众号查看
1.8 创建可视化罗盘显示设备的移动方向
PhoneGap移动应用开发手册
PhoneGap API向开发者提供了获取设备的坐标信息及前进方向信息。开发者可以利用这些信息自定义一个罗盘工具来显示设备的移动。
实现步骤
（1）创建HTML初始化框架，并添加需要脚本文件cordova-2.0.0.js的引用。
（2）本例将以类名的方式调用DOM中的特定元素。为此我们使用XUI JavaScript库
（http://xuijs.com/）。在head标签中添加script的引用包含该库。
（3）创建script标签块存放自定义的JavaScript用来和PhoneGap API交互，代码如下。
（4）在body标签下添加一个新的div元素，并将container的class属性赋给该元素。用来存放显示的罗盘元素。
（5）罗盘本身由两个图像组成。每个图像都被分配了一个class名，以方便在JavaScript中对其调用。将这两个元素添加到container元素中。
（6）接下来，在图像下面添加一个新的div元素，并将id属性设置为heading。该元素用来存放从罗盘回应的文本输出。
（10）这两种请求使用相同的onSuccess和onError方法进行输出处理和数据管理。onSuccess方法将以heading对象的方式返回数据。
（11）返回的数据将被用来设置HTML内容中的heading元素，以消息字符串的方式保存在先前定义的headingDiv变量中。
（12）可视化罗盘也需要对前进方向信息做出响应。利用XUI中的CSS方法，借助返回的magneticHeading属性，可将rose图像中的transform属性值转变为rotate。这里通过调用类名.rose引用该图像。
（13）onSuccess完成后，编写onError方法处理遇到问题时以友好的方式返回给用户，代码如下所示。
（14）在onSuccess中创建消息字符串时，调用了一个新的函数converTOText。该函数将从heading对象中接收的magneticHeading值转化为文本输出显示。在XUI deviceready代码块之外添加该函数。
（15）采用一些CSS将两个图像显示在屏幕上，确保rose图像位于罗盘图像之上。新建compass_style.css文件，并采用下面的风格添加内容。
实现原理
PhoneGap API罗盘功能中的watchHeading方法按frequency变量传递的时间间隔更新设备的移动方向数据。如果没有指定间隔时间，则采用默认的时间间隔100微秒（1/10秒）。
在整个持续周期中，每次成功请求，onSuccess方法将被执行并将结果格式化后输出到屏幕，同时改变图像元素的transform属性，使得图像对应移动方向转动方向。
onSuccess方法以compassHeading对象的方式返回设备的移动方向信息。该对象包含以下属性。
magneticheading：Number类型，取值范围为0～359.9，表示一次移动的转动度数。
trueheading：Number类型，取值范围为0～359.9，表示当前运动方向相对于正北的偏转度数。
headingaccuracy：Number类型，表示返回的移动方向和实际移动方向之间的偏差。
timestamp：以毫秒为单位，获取移动方向的时间。
