javascript - AngularJs GPS 访问在其他州被拒绝

Question

我正在开发 Cordova 应用程序，并且使用不同的 AngularJs 状态。如果我在第一个状态下调用 geolocation.watchposition 它工作得很好，但如果我在第二个状态下调用它，我会被拒绝访问...

我用按钮更改状态。不管我先从哪个州开始，第一个州有 GPS，第二个州没有。

编辑:我应该提到，它可以在浏览器中运行，但不能在我的 Android 设备上运行。

你知道为什么吗？

index.js

.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
    .state('app', {
      url: '/app',
      templateUrl: 'templates/main_menu.html',
      controller: 'AppCtrl'
    })

   .state('map', {
       url: '/map',
       templateUrl: 'templates/map.html',
       controller: 'MapCtrl'
   });

   //First State
   $urlRouterProvider.otherwise('/app');
});

Controller .js

.controller('AppCtrl', function ($scope, $rootScope, $ionicHistory, $http, $window) { 
  $scope.accPos = function () {
      var id, target, options;

      function success(pos) {
          alert("Pos: " + pos.coords.latitude + " " + pos.coords.longitude);
      }

      function error(err) {
          alert('ERROR(' + err.code + '): ' + err.message);
      }

      options = {
          enableHighAccuracy: false,
          timeout: 6000,
          maximumAge: 0
      };

      id = navigator.geolocation.watchPosition(success, error, options);
   };

   $scope.accPos();
}

//Looks exactly the same
.controller('MapCtrl', function ($scope, $rootScope, $ionicHistory, $http, $window) { ... }

Answer 1

您确实应该将此类代码移至服务中，以便可以在 Controller 之间共享。最重要的是，您可以利用 ui-router 的 resolve为每个需要它的州解析 GPS 位置的功能。

例如:

service.js

.factory('GeoLocationService', function ($window) { 
    var id, target, options, lastPosition;
    options = {
        enableHighAccuracy: false,
        timeout: 6000,
        maximumAge: 0
    };

    var geoLocationService = {
        startWatching: startWatching,
        stopWatching: stopWatching,
        getLastPosition: getLastPosition,
        options: options
    };  
    startWatching();
    return geoLocationService;

    function getLastPosition() {
        return lastPosition;
    }

    function startWatching() {
        id = $window.navigator.geolocation.watchPosition(success, error, options);
    }

    function stopWatching() {
        $window.navigator.geolocation.clearWatch(id);
    }

    function success(pos) {
        lastPosition = pos;
        alert("Pos: " + pos.coords.latitude + " " + pos.coords.longitude);
    }

    function error(err) {
        alert('ERROR(' + err.code + '): ' + err.message);
    }
});

index.js

.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
    .state('app', {
      url: '/app',
      templateUrl: 'templates/main_menu.html',
      controller: 'AppCtrl',
      resolve: {
         location: function(GeoLocationService){
            return GeoLocationService.getLastPosition();
         }
      }
    })

   .state('map', {
       url: '/map',
       templateUrl: 'templates/map.html',
       controller: 'MapCtrl',
       resolve: {
         location: function(GeoLocationService){
            return GeoLocationService.getLastPosition();
         }
      }
   });

   //First State
   $urlRouterProvider.otherwise('/app');
});

Controller .js

.controller('AppCtrl', function ($scope, $rootScope, $ionicHistory, $http, $window, GeoLocationService, location) {
    // show the location at start
    alert("Pos: " + location.coords.latitude + " " + location.coords.longitude);

    // maybe watch the location from the service
    $scope.$watch(function () {
        return GeoLocationService.getLastPosition();
    },
    function (newValue, oldValue) {
        if (newValue !== oldValue) {
            // do something
        }            
    }, true);
}

请注意，此代码完全未经测试。我只是想把这个想法传达给大家。

干杯!