ngCordova的工作地理定位示例

时间:2014-11-09 09:38:35

标签: cordova ionic-framework

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) {

});

2 个答案:

答案 0 :(得分:4)

我在nexus5上使用ionic,并在documentation个状态后添加到index.html

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

然后进入app.js注入ngCordova:

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

使用控制器:

(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)进行远程调试,我可以在控制台中看到我的latlong。

答案 1 :(得分:0)

我无法评论,因为我的声誉不是50.但我能够使ngCordova工作,更具体地说是$ cordovaGeolocation服务。在Chrome浏览器上测试我的Ionic应用程序以及在Galaxy S5手机中运行应用程序时,我能够收集经度和纬度。

我有角度版本1.2.23,ngCordova~0.1.7-alpha,离子1.0.0-beta.13和离子CLI版本1.2.9。

你有哪些版本?问题可能存在,但不确定。

编辑:查看ngCordova文档和我自己的应用程序,我从您的设置中注意到的一个区别是,您没有检查您的设备是否已加载以及是否有可用的cordova插件。

查看文档:{​​{3}}