Ionic + ngCordova +背景地理定位+ DeviceReady问题

时间:2015-07-02 21:36:31

标签: angularjs ionic-framework ionic cordova-plugins

我试图让背景地理位置插件在我的应用中运行;但是,当我使用deviceready函数时,页面有时只会在我的设备上加载。从我的谷歌搜索,似乎我应该使用$ ionicPlatform.ready,但是当我尝试这样做时,$ cordovaBackgroundGeolocation是未定义的。同样,当我尝试使用它时,设备总是未定义的。

我也尝试过手动引导角度,但没有工作;我试着简单地运行该函数而不将其放入deviceready或$ ionicPlatform.ready或其他任何东西;那也没有用。

有问题的代码:

控制器:

// Define the angular module
angular.module('testApp.controllers', ['ionic', 'ngCordova.plugins.geolocation', 'ngCordova.plugins.backgroundGeolocation'])

.controller('MapCtrl', ['$scope', '$ionicPopup', '$cordovaGeolocation', '$cordovaBackgroundGeolocation', '$timeout', '$http', '$ionicPlatform', 
               function ($scope, $ionicPopup, $cordovaGeolocation, $cordovaBackgroundGeolocation, $timeout, $http, $ionicPlatform) {
    $scope.loaded = false;

    var posOptions = { timeout: 5000, enableHighAccuracy: true, maximumAge: 5000 };
    $cordovaGeolocation.getCurrentPosition(posOptions)
        .then(function (location) {
            $scope.currentLat = location.coords.latitude;
            $scope.currentLong = location.coords.longitude;
            $scope.loaded = true;
        });

    $ionicPlatform.ready(function() {
        var bgGeo = $cordovaBackgroundGeolocation;

        // BackgroundGeoLocation is highly configurable.
        bgGeo.configure({
            url: 'http://www.my_api_url_here/',
            params: {
                deviceId: "testApp",
                "location": {
                    "latitude": "38.896339999999995",
                    "longitude": "-77.08521460000001"
                }
            },
            desiredAccuracy: 10,
            stationaryRadius: 20,
            distanceFilter: 30,
            notificationTitle: 'TestTitle', // <-- android only, customize the title of the notification
            notificationText: 'TestText', // <-- android only, customize the text of the notification
            activityType: 'OtherNavigation',
            debug: true, // <-- enable this hear sounds for background-geolocation life-cycle.
            stopOnTerminate: false // <-- enable this to clear background location settings when the app terminates
        });

        bgGeo.start();
    });
}])

指令:

.directive('bgeo', ['$cordovaGeolocation', '$cordovaBackgroundGeolocation', '$http', 
           function ($cordovaGeolocation, $cordovaBackgroundGeolocation, $http) {
    return {
        scope: {
           lat: '=',
           lng: '='
       },
        link: function (scope) {
            console.log("directive: ", scope.lat, scope.lng);
                myLatLng = new google.maps.LatLng(scope.lat, scope.lng);
                mapOptions = {
                    zoom: 16,
                    center: myLatLng
                };
                map = new google.maps.Map(document.getElementById('map'), mapOptions);
                marker = new google.maps.Marker({
                    position: myLatLng,
                    map: map,
                    draggable: false,
                    icon: 'small-orange-pin.png'
                });
        }
    }
}])

模板:

<ion-scroll zooming="true" direction="xy" style="width:90%">
   <div ng-if="loaded" bgeo lat="currentLat" lng="currentLong">
       <div id="map" style="width: 600px; height: 500px;"></div>
   </div>
</ion-scroll>

app.js运行方法:

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }

    if (window.cordova) {
      if (window.plugins && window.plugins.backgroundGeoLocation) {
        BackgroundGeolocation.configurePlugin(window.plugins.backgroundGeoLocation);
      }
    }
  });
})

完整的源代码在https://github.com/sahiltalwar88/binding-geolocation-issue的github上。非常感谢任何帮助!

1 个答案:

答案 0 :(得分:1)

主要问题是我必须运行bower install;我错过了几个包裹。一旦我这样做,我就可以使用离子就绪功能和onDeviceReady就好了。然后,为了使iOS回调函数正常工作,我不得不更新我的语法以使用ngCordova(使用Q和promises)而不是回调函数,如示例所示。

这是我最终代码的结构:

$ionicPlatform.ready(function() {
if(window.StatusBar) {
  StatusBar.styleDefault();
}

$location.path('/app');
$rootScope.$digest();

$rootScope.deviceReady = false; 

document.addEventListener('deviceready', function () {
    if(window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
      window.cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }

    var bgGeo = $cordovaBackgroundGeolocation;
    var deviceId = $cordovaDevice.getUUID();
    var addVisitUrl = 'your-url-goes-here';

    $rootScope.deviceId = deviceId;
    $rootScope.deviceReady = true;

    var posOptions = { timeout: 5000, enableHighAccuracy: true, maximumAge: 5000 };
    $cordovaGeolocation.getCurrentPosition(posOptions)
        .then(function (location) {
            $rootScope.currentLat = location.coords.latitude;
            $rootScope.currentLong = location.coords.longitude;

            var yourAjaxCallback = function(response) {
                bgGeo.finish();
            };

            var callbackFn = function(location) {
                var data = {
                                deviceId: deviceId,
                                "location": {
                                    "latitude": location.latitude,
                                    "longitude": location.longitude
                                }
                            };
                $http.post(addVisitUrl, data);
                // Other code goes here

                yourAjaxCallback.call(this);
            };

            var failureFn = function(error) {
                alert('Background Geolocation Error: ' + error);
                // Other code goes here
            };

            bgGeo.configure({
                url: addVisitUrl,
                params: {
                    deviceId: deviceId,
                    "location": {
                        "latitude": $rootScope.currentLat,
                        "longitude": $rootScope.currentLong
                    }
                },
                desiredAccuracy: 10,
                stationaryRadius: 10,
                distanceFilter: 10,
                activityType: 'OtherNavigation',
                debug: true, 
                stopOnTerminate: false
            })
            .then(callbackFn, failureFn, callbackFn);

            bgGeo.start();
        });
    $rootScope.$digest();
    });
  });
})