如何在 Ionic 中将 Cordova Geolocation 与 OpenWeatherMap 结合使用？

Question

我有一个 Ionic 项目连接到 OpenWeatherMap API，我想使用 Cordova 插件进行地理定位；我试图连接它们，并设法进行了地理定位，但无法从 API ...

得到答案

但是 API 配置正确，因为我能够在安装插件之前获取数据 ...

这是代码：

controllers.js =>

angular.module('weather')
.controller('WeatherCtrl', function($scope, $cordovaGeolocation, $http, OpenWeatherConfig) {
  var posOptions = {timeout: 10000, enableHighAccuracy: false};
  $cordovaGeolocation
    .getCurrentPosition(posOptions)
    .then(function (position) {
      var lat  = position.coords.latitude;
      var lng = position.coords.longitude;
    }, function(err) {
    });
  $scope.state = false;
  $scope.weatherData = {
    icon: '',
    main: '',
    city: '',
    description: '',
    coord: '',
    temp: ''
  };
  $scope.loadWeather = function(lat, lng) {
    var url = OpenWeatherConfig.searchUrl + 'lat=' + lat + '&lon=' + lng + OpenWeatherConfig.units + OpenWeatherConfig.appid;
    $http.get(url).success(function(data) {
      $scope.weatherData.icon = OpenWeatherConfig.imgUrl + data.weather[0].icon + '.png';
      $scope.weatherData.main = data.weather[0].main;
      $scope.weatherData.city = data.name;
      $scope.weatherData.description = data.weather[0].description;
      $scope.weatherData.coord = data.coord;
      $scope.weatherData.temp = data.main.temp;
      $scope.state = true;
    });
  };
});

weather.html =>

<ion-view>
  <ion-content overflow-scroll="false" class="weather-home">
    <button class="button button-full button-calm" ng-click="loadWeather()">
      Search
    </button>
    <div ng-if="state" class="forecast">
        <img src="{{weatherData.icon}}" class="icon"/>
        <label class="bigText">{{weatherData.main}}</label>
        <div class="mainText">Town : {{weatherData.city}}</div>
        <div class="mainText">Current conditions : {{weatherData.description}}</div>
        <div class="mainText">Geographical coordinates : {{weatherData.coord}}</div>
        <div class="bigText">{{weatherData.temp}} °C</div>
    </div>
  </ion-content>
</ion-view>

Firefox 控制台中没有显示任何内容，我只对这些文件进行了更改，因为 API 是运行 ...

Answer 1

感谢"digit"帮我找路！

解决方法如下：

controllers.js =>

.controller('WeatherCtrl', function($scope, $cordovaGeolocation, $http, OpenWeatherConfig) {
  $scope.state = false;
  $scope.weatherData = {
    icon: '',
    main: '',
    city: '',
    description: '',
    lat:'',
    lon: '',
    temp: ''
  };
  $scope.loadWeather = function() {
    var posOptions = {timeout: 10000, enableHighAccuracy: false};
    $cordovaGeolocation
    .getCurrentPosition(posOptions)
    .then(function (position) {
      var lat  = position.coords.latitude;
      var lon = position.coords.longitude;

      var url = OpenWeatherConfig.searchUrl + 'lat=' + lat + '&lon=' + lon + OpenWeatherConfig.units + OpenWeatherConfig.appid;
      $http.get(url).success(function(data) {
       $scope.weatherData.icon = OpenWeatherConfig.imgUrl + data.weather[0].icon + '.png';
       $scope.weatherData.main = data.weather[0].main;
       $scope.weatherData.city = data.name;
       $scope.weatherData.description = data.weather[0].description;
       $scope.weatherData.lat = data.coord.lat;
       $scope.weatherData.lon = data.coord.lon;
       $scope.weatherData.temp = data.main.temp;
       $scope.state = true;
      });
    }, function(err) {
    });
  };
});

weather.html =>

<ion-view>
  <ion-content overflow-scroll="false" class="weather-home">
    <button class="button button-full button-calm" ng-click="loadWeather()">
      Search
    </button>
    <div ng-if="state" class="forecast">
      <img src="{{weatherData.icon}}" class="icon"/>
      <label class="bigText">{{weatherData.main}}</label>
      <div class="mainText">Town : {{weatherData.city}}</div>
      <div class="mainText">Current Conditions : {{weatherData.description}}</div>
      <div class="mainText">Geographical coordinates : {{weatherData.lat}}, {{weatherData.lon}}</div>
      <div class="bigText">{{weatherData.temp}} °C</div>
    </div>
  </ion-content>
</ion-view>

如何在 Ionic 中将 Cordova Geolocation 与 OpenWeatherMap 结合使用？

How to use Cordova Geolocation with OpenWeatherMap in Ionic?

angularjs

cordova

ionic-framework

ngcordova

openweathermap