Angularjs 如何在爱奥尼亚使用Cordova地理定位和OpenWeatherMap？

我有一个连接到OpenWeatherMapAPI的Ionic项目，我想使用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;
    });
  };
});

.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.coord}}</div>
        <div class="bigText">{{weatherData.temp}} °C</div>
    </div>
  </ion-content>
</ion-view>

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

搜索
{{weatherData.main}
城镇：{{weatherData.city}
当前条件：{{weatherData.description}
地理坐标：{{weatherData.coord}
{{weatherData.temp}}摄氏度

Firefox控制台中没有显示任何内容，自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;
    });
  };
});

.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.coord}}</div>
        <div class="bigText">{{weatherData.temp}} °C</div>
    </div>
  </ion-content>
</ion-view>

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

搜索
{{weatherData.main}
城镇：{{weatherData.city}
当前条件：{{weatherData.description}
地理坐标：{{weatherData.lat}}、{{weatherData.lon}
{{weatherData.temp}}摄氏度

让您尝试使用rest客户端测试api。它是否返回结果？是的，正如我在问题中所说，API在添加插件之前工作，它与城市名称一起工作。。。我刚刚在Firefox RESTClient插件中测试了它，这次使用坐标，它也能工作…我发现了问题，尽管lat&lng变量检索地理位置，但这些值不会传递给url变量。。。我只需要找到解决此问题所需的更改…哦…我明白了。在哪里调用scope.loadWeather函数。我在你的代码中没有看到。我开始学习角度和离子，所以我承认我有点迷路了。。。我所有的文件controllers.js都在这里，因此没有调用函数$scope.loadWeather，我不知道在哪里以及如何集成它…你能解释一下代码的非工作版本和工作版本之间到底发生了什么变化吗？1/问题的代码一开始更不稳定，但是在发布后的几个小时里，我有了一些改进，所以我修改了这个问题……2/然后“$scope.loadWeather（lat，lon）；”丢失了，所以“lat”和“lng”变量会在“url”变量需要这些值来检索天气数据之前丢失它们的值。3/然后“cordova plugin geolocation”在“loadWeather”函数，因此位置恢复、调用和显示天气数据是在加载时完成的，而只有位置必须完成，其余部分取决于触发“loadWeather”函数的ng点击。4/还有经度变量的重命名，“lng”变为“lon”，因为要检索坐标，OpenWeatherMap API要求将此变量命名为“lon”。