Qiblah方向 - 使用cordova设备方向 - IONIC / AngularJS

Question

使用IONIC / Angularjs为Android / IPhone开发Hybrid应用程序，尝试使用Cordova设备方向实现Qiblah方向，下面是相同的逻辑

使用指南针观察标题，获取计算朝向方向的北方向和旋转角度。

// TO FIND DEVICE ORIENTATION(DEGREES)
    $scope.qiblahRotation = {
        '-moz-transform': 'rotate(' + $scope.rotationAngle + 'deg)',
        '-webkit-transform': 'rotate(' + $scope.rotationAngle + 'deg)',
        '-o-transform': 'rotate(' + $scope.rotationAngle + 'deg)',
        '-ms-transform': 'rotate(' + $scope.rotationAngle + 'deg)',
        'transform': 'rotate(' + $scope.rotationAngle + 'deg)',
        '-webkit-transition': '30ms linear all',
        '-moz-transition': '30ms linear all',
        '-o-transition': '30ms linear all',
        '-ms-transition': '30ms linear all',
        'transition': '30ms linear all',
        '-webkit-transition': '0.1ms linear all',
        '-moz-transition': '0.1ms linear all',
        '-o-transition': '0.1ms linear all',
        '-ms-transition': '0.1ms linear all',
        'transition': '0.1ms linear all',
    };
    $scope.northRotation = {
        '-moz-transform': 'rotate(' + $scope.northDirection + 'deg)',
        '-webkit-transform': 'rotate(' + $scope.northDirection + 'deg)',
        '-o-transform': 'rotate(' + $scope.northDirection + 'deg)',
        '-ms-transform': 'rotate(' + $scope.northDirection + 'deg)',
        'transform': 'rotate(' + $scope.northDirection + 'deg)',
        '-webkit-transition': '30ms linear all',
        '-moz-transition': '30ms linear all',
        '-o-transition': '30ms linear all',
        '-ms-transition': '30ms linear all',
        'transition': '30ms linear all',
        '-webkit-transition': '0.1ms linear all',
        '-moz-transition': '0.1ms linear all',
        '-o-transition': '0.1ms linear all',
        '-ms-transition': '0.1ms linear all',
        'transition': '0.1ms linear all',
    };
    document.addEventListener("deviceready", onDeviceReady, false);

    function onDeviceReady() {
        if(!$rootScope.qibla){
            navigator.geolocation.getCurrentPosition(ongSuccess, ongError);
        }
        // TO FIND PHONE'S Latitude AND Longitude

        function ongSuccess(position) {
            $rootScope.watchID = navigator.compass.watchHeading(onSuccess, onError, options);

            // TO CALCULATE QIBLAH DIRECTION

            $scope.phone_latitude = position.coords.latitude;
            $scope.phone_longitude = position.coords.longitude;
            $scope.$apply();

            var A = 21.4226514 * (Math.PI / 180.0);
            var B = 39.8269916 * (Math.PI / 180.0);
            var C = $scope.phone_latitude * (Math.PI / 180.0);
            var D = $scope.phone_longitude * (Math.PI / 180.0);

            var direction = 180.0 / Math.PI * Math.atan2(Math.sin(B - D), Math.cos(C) * Math.tan(A) - Math.sin(C) * Math.cos(B - D));

            $scope.qiblah = parseInt(direction);
            console.log("qiblah" + $scope.qiblah);
            $scope.$apply();

        };

        function ongError(error) {
            $rootScope.qibla = true;
            if(ionic.Platform.isIOS()){
                if(error.code == 1){
                    commonServices.showAlertMessage($scope.STRINGS.appName, $translate('ERROR_CODES.denAcc'));
                }
            } else {
                commonServices.showAlertMessage($scope.STRINGS.appName, "Error Code" + error.message);
            }
        };


        function onSuccess(heading) {
            $scope.northDirection = (360 - parseInt(heading.magneticHeading));
            $scope.rotationAngle = ($scope.northDirection) + ($scope.qiblah);
            console.log("heading-" + heading.magneticHeading);
            console.log("north-" + $scope.northDirection);
            console.log("rotationAngle" + $scope.rotationAngle);
            if ($scope.rotationAngle >= 0) {
                $scope.degree = $scope.rotationAngle + "°";
            } else {
                $scope.degree = (290 + 69) + $scope.rotationAngle + "°";
            }
            // $scope.degree=$scope.rotationAngle+"°";
            // console.log("rotationAngle"+$scope.rotationAngle);
            $scope.$apply();
            $scope.qiblahRotation = {
                '-moz-transform': 'rotate(' + $scope.rotationAngle + 'deg)',
                '-webkit-transform': 'rotate(' + $scope.rotationAngle + 'deg)',
                '-o-transform': 'rotate(' + $scope.rotationAngle + 'deg)',
                '-ms-transform': 'rotate(' + $scope.rotationAngle + 'deg)',
                'transform': 'rotate(' + $scope.rotationAngle + 'deg)',
                '-webkit-transition': '30ms linear all',
                '-moz-transition': '30ms linear all',
                '-o-transition': '30ms linear all',
                '-ms-transition': '30ms linear all',
                'transition': '30ms linear all',
                '-webkit-transition': '0.1ms linear all',
                '-moz-transition': '0.1ms linear all',
                '-o-transition': '0.1ms linear all',
                '-ms-transition': '0.1ms linear all',
                'transition': '0.1ms linear all',
            };
            $scope.northRotation = {
                '-moz-transform': 'rotate(' + $scope.northDirection + 'deg)',
                '-webkit-transform': 'rotate(' + $scope.northDirection + 'deg)',
                '-o-transform': 'rotate(' + $scope.northDirection + 'deg)',
                '-ms-transform': 'rotate(' + $scope.northDirection + 'deg)',
                'transform': 'rotate(' + $scope.northDirection + 'deg)',
                '-webkit-transition': '30ms linear all',
                '-moz-transition': '30ms linear all',
                '-o-transition': '30ms linear all',
                '-ms-transition': '30ms linear all',
                'transition': '30ms linear all',
                '-webkit-transition': '0.1ms linear all',
                '-moz-transition': '0.1ms linear all',
                '-o-transition': '0.1ms linear all',
                '-ms-transition': '0.1ms linear all',
                'transition': '0.1ms linear all',
            };

        }




        function onError(compassError) {
            commonServices.showAlertMessage($scope.STRINGS.appName, 'Compass error: ' + compassError.code);
        };


        var options = {
            frequency: 10
        };

经过多次尝试后，我们无法使用HTML5 / Cordova带来确切的方向。请建议是否有相同的插件。