實(shí)現(xiàn)方案

利用羅盤(pán)接口返回的【數(shù)據(jù)】，轉(zhuǎn)化為指南針偏移量【度數(shù)】，利用CSS3 transform的rotate屬性進(jìn)行2d旋轉(zhuǎn)，旋轉(zhuǎn)量與之雙向數(shù)據(jù)綁定。

核心代碼片段

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. // 計(jì)算應(yīng)偏移度數(shù)
9. rotate: 360 - res.direction.toFixed(0)
10. })
11. });
12. }

優(yōu)點(diǎn)

即用即走，不需下載安裝（相對(duì)的），可斷網(wǎng)使用

不足

API返回的數(shù)據(jù)不穩(wěn)定，手機(jī)靜止?fàn)顟B(tài)，羅盤(pán)度數(shù)一直浮動(dòng)，范圍跨度比較大，導(dǎo)致體驗(yàn)不夠流暢；系統(tǒng)自帶羅盤(pán)數(shù)據(jù)就很穩(wěn)定。

改進(jìn)方向

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