Google Geocoder 和 jQuery Deferred答案

【问题标题】：Google Geocoder and jQuery DeferredGoogle Geocoder 和 jQuery Deferred
【发布时间】：2014-08-29 15:40:41
【问题描述】：

我想知道，是否有办法让 jQuery Deferred 与 Google Geocoder 一起工作。我试过类似的东西：

// ...

_geocoder: function( address ) {
    if ( !this.props.geocoder ) {
        this.props.geocoder = new google.maps.Geocoder();
    }

    var deferred = $.Deferred(),
        geocoder;           

    geocoder = this.props.geocoder.geocode( { 'address': address }, function( results, status ) {
        if ( status === google.maps.GeocoderStatus.OK ) {
            deferred.resolve({
                lat: results[ 0 ].geometry.location.k,
                lng: results[ 0 ].geometry.location.A
            });
        } else {
            deferred.reject();
        }

        return deferred.promise();
    });

    $.when( geocoder() ).then(
        function( data ) {
            alert( status );
        },
        function() {
            alert( "Defer rejected" );
        }
    );
},


// ...

但是google.maps.Geocoder 不返回 jQuery Deferred 对象，因此此代码不会按预期工作。还有其他方法吗？我也不确定return deferred.promise();，因为我查看了一些代码示例，它们只使用了return deferred;。有什么区别吗？

【问题讨论】：

标签： jquery jquery-deferred google-geocoder

【解决方案1】：

我会做这样的事情：

// ...
_geocoder: function(address) {
    var geocoder = this.props.geocoder;
    if (!geocoder) {
        geocoder = this.props.geocoder = new google.maps.Geocoder();
    }
    return $.Deferred(function(dfrd) {
        geocoder.geocode({'address': address}, function(results, status) {
            if(status === google.maps.GeocoderStatus.OK) {
                dfrd.resolve(results[0]);
            } else {
                dfrd.reject(new Error(status));
            }
        });
    }).promise();
},
// ...

注意：通过使用整个 results[0] 对象解析 Deferred，可以在 Promise 链中提供更多潜在可用的数据。见API Reference

测试如下：

yourNamespace._geocoder('some address').then(function(result) {
    console.dir(result.geometry.location);
}, function(err) {
    console.error(err);
});

【讨论】：