2017-02-24 7 views
0

geolocationServiceからweatherCtrlにデータを渡す際に問題があります。私は私のopenweather APIの要求を送ることができるように私のコントローラの位置を渡したいと思います。angularJS/cordovaのサービスから座標を返す方法

また、私はデータがどのようにサービスに格納され、正しく使用するのかを理解するのに苦労しています。

ここに私のjsファイルがあります。

geolocationService.js

angular.module('app').service('geolocationService', function() { 
geolocationSuccess = function(position){ 
    alert(
    'Latitude: '   + position.coords.latitude   + '\n' + 
    'Longitude: '   + position.coords.longitude   + '\n' + 
    'Altitude: '   + position.coords.altitude   + '\n' + 
    'Accuracy: '   + position.coords.accuracy   + '\n' + 
    'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '\n' + 
    'Heading: '   + position.coords.heading   + '\n' + 
    'Speed: '    + position.coords.speed    + '\n' + 
    'Timestamp: '   + position.timestamp    + '\n'); 
    return position; 
} 
geolocationError = function(error) { 
    alert(
    'code: ' + error.code + '\n' + 
    'message: ' + error.message + '\n'); 
} 
this.getGeolocation = function(){ 
    navigator.geolocation.getCurrentPosition(geolocationSuccess,geolocationError); 
}}); 

weatherCtrl.js

angular.module('app').controller('weatherCtrl',['$scope', '$http', 'cityService', 'geolocationService', 
    function($scope, $http , cityService, geolocationService){ 
     $scope.searchCity = function() { 
      var apiKey = "****"; 
      var apiLang = "en" 
      var url = "http://api.openweathermap.org/data/2.5/forecast/daily?q="+$scope.city+"&APPID="+apiKey+"&units=metric&lang="+apiLang; 
      $http.get(url).success(httpSuccess).error(function(){ 
       alert("Erreur : données non récupérées"); 
      }); 
     } 
     $scope.Math = Math; 
     httpSuccess = function(response){ 
      $scope.weather = response; 
     } 
     $scope.setCity = function (city){ 
      cityService.set(city); 
     } 
     $scope.geolocate = function(){ 
      $scope.position = geolocationService.getGeolocation(); 
     } 
    } 
]); 

私はgeolocate()を呼び出すときに、geolocationSuccess関数が呼び出されますが、私は返すように方法がわかりません正しく位置。

+0

それは位置から値を返しています。 「正確に」とはどういう意味ですか? – samura

答えて

0

geolocationSuccess関数で位置を返しますが、変数に割り当てませんでした。

navigator.geolocation.getCurrentPositionが非同期呼び出しであるためです。
REF:https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition

ので、私は最初に、あなただけの非同期の問題を認識して、他の関数にそれをgeolocationService.setGeolocationをバインドすることができます。
プロミスの方法を追加して非同期問題を解決し、下部を確認します。

weatherCtrl.js

app.controller('weatherCtrl', ['$scope', 'geolocationService', 
    function ($scope, geolocationService) { 

     geolocationService.setGeolocation(); 

     $scope.geolocate = function() { 
      $scope.position = geolocationService.getGeolocation(); 
      // now you can use $scope.position object. 
      console.log($scope.position); 
     } 
    } 
]); 

geolocationService.js非同期で

angular.module('app').service('geolocationService', function() { 
    var currentPosition = {}; 
    geolocationSuccess = function (position) { 
     alert(
      'Latitude: ' + position.coords.latitude + '\n' + 
      'Longitude: ' + position.coords.longitude + '\n' + 
      'Altitude: ' + position.coords.altitude + '\n' + 
      'Accuracy: ' + position.coords.accuracy + '\n' + 
      'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '\n' + 
      'Heading: ' + position.coords.heading + '\n' + 
      'Speed: ' + position.coords.speed + '\n' + 
      'Timestamp: ' + position.timestamp + '\n'); 

     // set any properties you needs 
     currentPosition.latitude = position.coords.latitude; 
     currentPosition.longitude = position.coords.longitude; 

     // no need to return position here; 
    } 

    geolocationError = function (error) { 
     alert(
      'code: ' + error.code + '\n' + 
      'message: ' + error.message + '\n'); 
    } 

    this.setGeolocation = function (position) { 
     navigator.geolocation.getCurrentPosition(geolocationSuccess, geolocationError); 
    } 

    this.getGeolocation = function() { 
     return currentPosition; 
    } 

}); 

ディール:プロミスのアプローチを使用して:
weathe rCtrl.js

app.controller('weatherCtrl', ['$scope', 'geolocationService', 
     function ($scope, geolocationService) { 
      $scope.geolocate = function() { 
       geolocationService.getGeolocation().then(pos => { 
        $scope.position = pos; 
        console.log($scope.position); 
       }) 
       .catch(err => console.error(err)); 
      } 
     } 
    ]); 

geolocationService.js

angular.module('app').service('geolocationService', function() { 

    this.getGeolocation = function() { 
     return new Promise(function (resolve, reject) { 
      navigator.geolocation.getCurrentPosition(function (position) { 
       resolve(position); 

      }, function (error) { 
       reject(error); 
      }); 
     }) 
    } 
}); 
関連する問題