从 ng-repeat AngularJS 中的项目获取并显示反向地理编码

Question

我从我的数据库中提取要在谷歌地图上显示的区域列表。我还想使用reverse geocoding 显示离每个区域最近的城市，但无法使其正常工作。 我对 AngularJS 和 Promise 有一些经验，并且搜索过 Stackoverflow 但找不到任何解决此问题的方法。

HTML：

<div ng-repeat="area in vm.areas">
 <span>{{area.name}}</span>
 <span>Close to: </span> <span>{{vm.getCity(area)}}</span>
</div>

JS：

vm.getCity = function(area){
 var center = getCenter(area.paths); 
 getAddress(center[0], center[1]).then(function(city){
   console.log(city);
   return city;
 })
}

function getAddress (latitude, longitude) {
  return $q(function (resolve, reject) {
      var request = new XMLHttpRequest();

      var method = 'GET';
      var url = 'http://maps.googleapis.com/maps/api/geocode/json?latlng=' + latitude + ',' + longitude + '&sensor=true';
      var async = true;

      request.open(method, url, async);
      request.onreadystatechange = function () {
          if (request.readyState == 4) {
              if (request.status == 200) {
                  var data = JSON.parse(request.responseText);
                  var results = data.results;
                  var returnString = ""
                  for(var i=0; i<results.length; i++){
                    var types = results[i].types;
                    if(types[0] === 'locality'){
                      returnString = results[i].address_components[0].long_name;
                    }
                  }
                  resolve(returnString);
              }
              else {
                  reject(request.status);
              }
          }
      };
      request.send();
  });
};

我可以看到控制台中显示了正确的城市，但它们在视图中不可见。非常感谢任何帮助！

Answer 1

您为什么不使用Angular's $http service？通过不使用它并进行自定义 HTTP 调用，Angular 不知道您正在这样做。因此，当您获取数据时，Angular 不知道发生了什么变化，也不会刷新数据或视图。 如果您使用 Angular 的 $http 服务，您将留在它的生态系统中并让它知道您的更改。

$http({
  method: 'GET',
  url: 'http://maps.googleapis.com/maps/api/geocode/json?latlng=' + latitude + ',' + longitude + '&sensor=true'
}).then(function successCallback(response) {
    // var data = ......
 }, function errorCallback(response) {

});