百度智能小程序 監(jiān)聽羅盤數(shù)據(jù)

swan.onCompassChange

工具和真機(jī)中的實(shí)現(xiàn)有區(qū)別，詳見 API 實(shí)現(xiàn)差異

解釋：監(jiān)聽羅盤數(shù)據(jù)，頻率：5 次/秒，接口調(diào)用后會自動開始監(jiān)聽，可使用 swan.stopCompass 停止監(jiān)聽。Web 態(tài)說明：由于瀏覽器對于 W3C 規(guī)范的實(shí)現(xiàn)差異，onCompassChange 功能在部分瀏覽器(比如 Safari 瀏覽器)下不可用，在功能不可用的情況下，該方法的事件回調(diào)不會被觸發(fā)，但該方法會返回一個(gè)錯(cuò)誤對象。

方法參數(shù)

Function callback

callback 參數(shù)說明

accuracy 參數(shù)說明

僅適用于 Android。

示例 

在開發(fā)者工具中打開

圖片示例

代碼示例

<view class="card-area">
    <view class="wrap">
        <view class="page-top">
            <view class="tip-week">{{title}}</view>
        </view>
        <view class="direction">
            <view class="bg-compass-line"></view>
            <view class="bg-compass" style="transform: rotate(-{{direction}}deg)">
                <view class="num num0" style="transform: rotate({{direction}}deg)">0</view>
                <view class="num num90" style="transform: rotate({{direction}}deg)">90</view>
                <view class="num num180" style="transform: rotate({{direction}}deg)">180</view>
                <view class="num num270" style="transform: rotate({{direction}}deg)">270</view>
            </view>
            <div class="cg-wrap">
                <div class="circle-left-wrap"><div class="circle-left" style="transform:rotate({{leftdeg}}deg);transform-origin:50% 50%"></div></div>
                <div class="circle-right-wrap"><div class="circle-right" style="transform:rotate({{rightdeg}}deg);transform-origin:50% 50%"></div></div>
                <div class="mask">
                    <view class="direction-num">
                        <text>{{direction}}</text>
                        <text class="direction-degree"></text>
                    </view>
                </div>
            </div>
        </view>
        <view class="page-body-btn">
            <view class="middle-btn {{!isWatch ? '' : 'disabled'}}" bind:tap="startWatch">開始監(jiān)聽</view>
            <view class="middle-btn {{!isWatch ? 'disabled' : ''}}" bind:tap="stopWatch">停止監(jiān)聽</view >
        </view>
    </view>
</view>

Page({
    data: {
        title: '旋轉(zhuǎn)手機(jī)即可獲取方位信息',
        direction: 0,
        isWatch: true,
        leftdeg: 0,
        rightdeg: 0
    },

    onReady() {
        swan.onCompassChange(res => {
            this.setData({
                direction: parseInt(res.direction, 10)
            });
            this.updateProgress(res.direction);
        });
    },
    onShow() {
        let isWatch = this.data.isWatch;
        isWatch ? swan.startCompass() : swan.stopCompass();
    },
    startWatch() {
        this.setData('isWatch', true);
        swan.startCompass();
    },
    stopWatch() {
        this.setData('isWatch', false);
        swan.stopCompass();
    },
    updateProgress(direction) {
        let leftdeg;
        let rightdeg;
        let deg = +direction;
        if (deg > 180) {
            leftdeg = 180;
            rightdeg = 180 - deg;
        }
        else {
            leftdeg = -deg;
            rightdeg = 0;
        }
        this.setData({
            leftdeg,
            rightdeg
        });
    }
});

錯(cuò)誤碼

Android

iOS