本節書摘來自異步社群《phonegap移動應用開發手冊》一書中的第1章，第1.8節建立可視化羅盤顯示裝置的移動方向，作者 【英】matt gifford，更多章節内容可以通路雲栖社群“異步社群”公衆号檢視
1.8 建立可視化羅盤顯示裝置的移動方向
phonegap移動應用開發手冊
phonegap api向開發者提供了擷取裝置的坐标資訊及前進方向資訊。開發者可以利用這些資訊自定義一個羅盤工具來顯示裝置的移動。
實作步驟
（1）建立html初始化架構，并添加需要腳本檔案cordova-2.0.0.js的引用。
（2）本例将以類名的方式調用dom中的特定元素。為此我們使用xui javascript庫
（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：以毫秒為機關，擷取移動方向的時間。