简体   繁体   中英

ngCordova geolocation with ionic framework

I am trying to use ngCordova geolocation with my ionic app. I did the following:

1) Bower installed and included ngcordova.min.js in index.html

2) Injected 'ngCordova' as a dependency in my angular app.module.

angular
.module('app', ['ionic', 'ngCordova'])
.run(runConfig);

3) Added the dependency in my controller

SomeController.$inject = ['$location', '$cordovaGeolocation',
                          '$ionicPlatform']

4) This is what my controller looks like:

 (function() {
    'use strict';

  angular
    .module('app.submission')
    .controller('SomeController', SomeController);

  SomeController.$inject = ['$location', '$cordovaGeolocation', '$ionicPlatform'];

  function SomeController($location, $element, $cordovaGeolocation, $ionicPlatform) {
    var vm = this;
    vm.place = '';
    vm.address = {
      'latitude' : null,
      'longitude' : null
    }

    vm.initialize = initialize;
    vm.getAddress = getAddress;

    function initialize() {
       var input = (document.getElementById('location-search'));
       var searchBox = new google.maps.places.SearchBox((input));
    }

    function getAddress(){
      var posOptions = {timeout: 20000, enableHighAccuracy: true};
            $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);
            });
    }

  }

})();

5) Function getAddress() is called on ng-click of a button.

while i test the app on a web browser (google chrome) I get the following error

TypeError: $cordovaGeolocation.getCurrentPosition is not a function
at SomeController.getAddress (SomeController.js:29)
at $parseFunctionCall (ionic.bundle.js:21044)
at ionic.bundle.js:53458
at Scope.$eval (ionic.bundle.js:23100)
at Scope.$apply (ionic.bundle.js:23199)
at HTMLButtonElement.<anonymous> (ionic.bundle.js:53457)
at HTMLButtonElement.eventHandler (ionic.bundle.js:11713)
at triggerMouseEvent (ionic.bundle.js:2863)
at tapClick (ionic.bundle.js:2852)
at HTMLDocument.tapMouseUp (ionic.bundle.js:2925)

Can someone help me here, what is wrong with my code? Is it supposed to work only on mobile devices? I tried on a android device and it didnt work.

I am using the same code,, try to replace with these codes

 SomeController.$inject = ['$scope','$location', '$cordovaGeolocation', '$ionicPlatform'];

  function SomeController($scope,$location, $element, $cordovaGeolocation, $ionicPlatform) {
  var posOptions = {timeout: 20000, enableHighAccuracy: true,maximumAge: 0 };
  $scope.where = function(){
    $cordovaGeolocation.getCurrentPosition(posOptions)
      .then(function(position){
          console.log(position);
          $scope.lat1  = position.coords.latitude
          $scope.lng1 = position.coords.longitude

      }, function(error){
          console.log('error:', error);
    });
  };
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM