cordova - ngCordova 的工作地理定位示例

Question

ngCordova 和 Ionic 可以一起工作吗？

这似乎是一个绝妙的组合，但无论我尝试什么组合，我似乎都无法让它用于地理定位。

我正在使用选项卡项目模板，但我已经尝试了所有其他模板，但结果相同。

这是我的controllers.js 文件，除了对话框之外什么都不起作用......有什么想法吗？

angular.module('starter.controllers', ['ngCordova'])
    .controller('DashCtrl', function($scope,
                $cordovaMedia, $cordovaNetwork, $cordovaToast,
                $cordovaDialogs, $cordovaSpinnerDialog, $cordovaGeolocation) {

        var src = "/android_asset/www/audio/gong.mp3";

        // //
        // var mediaSource = $cordovaMedia.newMedia(src);
        // var promise = mediaSource.promise;
        // var mediaStatus = mediaSource.mediaStatus;
        // var media = mediaSource.media;

        //$cordovaMedia.play(media);

        $scope.showdialog = function(message) {
            $cordovaDialogs.alert(err, 'scopey', 'ok');
        };

    $cordovaGeolocation
       .getCurrentPosition()
       .then(function (position) {
           var lat  = position.coords.latitude
           var long = position.coords.longitude

           $scope.showdialog();
       }, function(err) {
         // Error
         $scope.showdialog();
       });

    $scope.mutherclucker='oooo';

    $scope.SwapIt=function() {
        $scope.mutherclucker = $scope.mutherclucker=='yeah'?'oooo':'yeah';
        //$cordovaSpinnerDialog.show("title","message", false);
        $scope.showdialog();
    };

    // $cordovaToast
    // .show('Here is a message', 'long', 'center')
    // .then(function(success) {
    //   $scope.showdialog();
    // }, function (error) {
    //   $scope.showdialog();
    // });
    //

    var type = $cordovaNetwork.getNetwork();

    //

    var isOnline = $cordovaNetwork.isOnline();

    //

    var isOffline = $cordovaNetwork.isOffline();
})

.controller('FriendsCtrl', function($scope, Friends) {
    $scope.friends = Friends.all();
})

.controller('FriendDetailCtrl', function($scope, $stateParams, Friends) {
    $scope.friend = Friends.get($stateParams.friendId);
})

.controller('AccountCtrl', function($scope) {

});

Answer 1

我在 nexus5 上使用 ionic，添加后如 documentation状态，进入index.html

<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<script src="cordova.js"></script>

然后在app.js中注入(inject)ngCordova:

angular.module('youApp', [
    'ionic',
    'someService',
    'ngCordova'
])

用作 Controller :

(function () {
    'use strict';

    angular.module('geoblog').controller('InfoController', ['$cordovaGeolocation', InfoController]);

    function InfoController($cordovaGeolocation) {
        var vm = this;
        var posOptions = {timeout: 20000, enableHighAccuracy: true}

        vm.where = function(){
            $cordovaGeolocation.getCurrentPosition(posOptions)
            .then(function(position){
                var lat  = position.coords.latitude
                var long = position.coords.longitude
                console.log('lat', lat);
                console.log('long', long);  
            }, function(error){
                console.log('error:', error);
            });

        };
    };
})();

以及 html:

<ion-view view-title="Info" ng-controller="InfoController as vm">
  <ion-content>
        <h1>Info</h1>
        <button class="button button-full button-energized" ng-click="vm.where()">Where am I?</button>
  </ion-content>
</ion-view>

它的工作原理就像一个魅力，并且使用 chrome (chrome://inspect/#devices) 进行远程调试，我可以在控制台中看到我的经纬度。