使用Google地图API服务回调函数创建角度服务

时间:2013-09-22 08:30:39

标签: angularjs google-maps-api-3

我正在尝试创建一个使用谷歌地图地理编码器的角度服务,但我发现谷歌的回调是在执行服务功能后执行的。

控制器

app.controller( 'AppCtrl',['geocoder',function AppCtrl (geocoder) {
   var result=geocoder.geocode('greek');
   console.log(result);
});

服务

app.service('geocoder',function() {
            this.geocode=function(address) {
                    var geocoder = new google.maps.Geocoder();
                    geocoder.geocode( { 'address': address}, function(results, status) {
                            if (status == google.maps.GeocoderStatus.OK) {
                                    console.log(results);
                                    return results;
                            } else {
                                    return ('Geocode was not successful for the following reason: ' + status);
                            }
                    });
            };
    });

问题是,控制器中的console.log(result)输出undefined,服务中的console.log(结果)在调用函数后从google返回结果。也就是说,回调函数没有及时返回结果。

有没有办法克服这个问题? 感谢。

2 个答案:

答案 0 :(得分:3)

回调是处理网络\网络调用的异步性质的方法。您需要将geocode方法的实现更改为

  • 收到回复函数后,调用回调函数。
  • 使用then函数返回可在调用函数中处理的promise。

我发现此博文详细介绍了方法http://markdalgleish.com/2013/06/using-promises-in-angularjs-views/

答案 1 :(得分:1)

正如Chandermani指出的那样,你需要为你的方法提供一个回调:

app.service('geocoder',function() {
            this.geocode=function(address, outerCallback) {
                    var geocoder = new google.maps.Geocoder();
                    geocoder.geocode( { 'address': address}, function(results, status) {
                            console.log(results);
                            if (status == google.maps.GeocoderStatus.OK) {
                                    outerCallback({success: true, err: null, results: results});
                            } else {
                                    outerCallback({success:false, err: new Error('Geocode was not successful for the following reason: ' + status), results: null});
                            }
                    });
            };
    });

在您的控制器中:

app.controller( 'AppCtrl',['geocoder',function AppCtrl (geocoder) {
   var result=geocoder.geocode('greek', function(callbackResult) {
      console.log(callbackResult); //{success: true, err: undefined, results: {...} or {success:false, err: Error object, results: undefined}
   });

});

如果这样可行,那么您就可以重构代码以使用promise

希望这有帮助,

R上。