Question

我尝试将谷歌地理编码用作POC用于我可能正在处理的功能，但是我遇到了问题。

基本上，它从用户在搜索输入中键入地址开始，地理编码服务返回地址列表，因为不同的地址可能发生在不同的位置，或者如果用户拼写错误，那么用户可以选择正确的地址。

首先搜索（角度控制器）：

$scope.submit = function(addressform) {
      $scope.addresses = geocoder.getAddressList($scope.formData.address);
}

Geocoder是一家内部工厂，使用谷歌地图和谷歌地理编码器。这是此示例的相关地理编码器代码：

app.factory('geocoder', function(GoogleMap) {
  var geocoder = new google.maps.Geocoder(),
  return {
    getAddressList: function(address) {
      geocoder.geocode( { 'address': address }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          return results;
        } else {
          alert("Couldn't find that address! Google Maps says: " + status);
        }
      });
    }
  }
});

这是视图部分：

<ul>
  <li ng-repeat='address in addresses'>
    <a ng-click='displayOnMap()'>{{address.place_id}}</a>
  </li>
</ul>

这应该将地理编码结果写入视图。我遇到的问题是调用地理编码方法executs的控制器会立即返回，但在此之后的一段时间内，地理编码器实际上会返回结果。

如何使角度控制器等到地理编码器实际调用return语句并返回结果，那么我可以更新我的html吗？

Answer 1

您将无法逃避geocoder.geocode异步的事实。

您有几个选择：第一个是将回调传递给getAddressList并在成功时调用回调。更有棱角的方式是使用$q service。

getAddressList: function(address) {
  var deferred = $q.defer();

  geocoder.geocode( { 'address': address }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      deferred.resolve(results);
    } else {
      deferred.reject("Couldn't find that address! Google Maps says: " + status);
    }
  });

  return deferred.promise;
}

控制器也需要改变：

$scope.submit = function(addressform) {
  geocoder.getAddressList($scope.formData.address).then(function(result) {
    $scope.addresses = result;
  }, function(err) {
    alert(err);
  });
}

不要从服务发出警报。这是一个UI问题。

角度地理编码结果不同步

1 个答案: