實現方案

利用羅盤接口返回的【數據】，轉化為指南針偏移量【度數】，利用CSS3 transform的rotate屬性進行2d旋轉，旋轉量與之雙向數據綁定。

核心代碼片段

1. <view class='m-compass'>
2. <image class='m-compassbg' src='img/bg.png' style='transform:rotate({{rotate}}deg);'></image>
3. </view>
4. onLoad: function () {
5. var m-this = this;
6. wx.onCompassChange(function (res) {
7. m-this.setData({
8. // 計算應偏移度數
9. rotate: 360 - res.direction.toFixed(0)
10. })
11. });
12. }

優點

即用即走，不需下載安裝（相對的），可斷網使用

不足

API返回的數據不穩定，手機靜止狀態，羅盤度數一直浮動，范圍跨度比較大，導致體驗不夠流暢；系統自帶羅盤數據就很穩定。

改進方向

可以增加過渡效果、指針移動速率固定、單次范圍固定1deg。