Question

我目前正在为Google Map API GeoCoding构建一个简单的示例应用程序，并偶然发现了javascript的问题。

geocodeRequest方法应将其结果值分配给变量this.tempResult。但是当我尝试在Listener中打印时，varriable为null。

控制台的输出是：

听众：null
geoCodeRequest：Object

输出打印的顺序似乎意味着在geoCodeRequest方法设法分配this.tempResult变量之前，Listener中的代码会运行。

有解决方法吗？

$JSKK.Class.create
(
    {
        $namespace      :'application',
        $name           :'GeoCoder'
    }
)
(
    {
    },
    {
        service :null,
        main    :null,
        geoCodeInput: null,
        geoCodeButton: null,
        reverseGeoCodeButton: null,
        reverseGeoCodeActive: null,
        callback :null,
        reverseCallback:null,
        tempResult: null,


        init: function(main, callback, reverseCallback)
        {
            this.main = main;
            this.callback = callback;
            this.reverseCallback = reverseCallback;

            this.service = new google.maps.Geocoder();

            this.geoCodeInput = $('#toolPannel div[data-resource=locator] input[data-action=input]');
            this.geoCodeButton = $('#toolPannel div[data-resource=locator] input[data-action=geocode]');

            this.reverseGeoCodeButton = $('#toolPannel div[data-resource=locator] input[data-action=reversegeocode]');
            this.reverseGeoCodeActive = false;

            this.createListener();
        },


        geoCodeRequest: function(request)
        {
            this.service.geocode
            (
                request,
                function (result,status)
                {
                    //console.debug(arguments);
                    if (status== google.maps.GeocoderStatus.OK)
                    {
                        this.tempResult = result[0];
                        console.debug(this.tempResult);
                    }
                    else
                    {
                        alert ('GeoCoder request failed!');
                    }
                }.bind(this)
            );
        },

        createListener: function()
        {
            this.geoCodeButton.click(function()
                {
                    this.geoCodeRequest
                    (
                        {
                            address: this.geoCodeInput.val()
                        }
                    );
                    this.callback(this.tempResult);
                }.bind(this)    //Bind here
            );

            this.reverseGeoCodeButton.click(function()
                {
                    if (!this.reverseGeoCodeActive)
                    {
                        this.main.map.setOptions({draggableCursor:'crosshair'});
                        this.reverseGeoCodeActive=true;
                    }
                    else if(this.reverseGeoCodeActive)
                    {
                        this.main.map.setOptions({draggableCursor:'hand'});
                        this.reverseGeoCodeActive=false;
                    }
                }.bind(this)
            );

            google.maps.event.addListener
            (
                this.main.map,
                'click',
                function (event)
                {
                    if (this.reverseGeoCodeActive)
                    {
                        this.geoCodeRequest
                        (
                            {
                                location: event.latLng
                            }
                        );
                        console.debug(this.tempResult);
                        this.reverseCallback(this.tempResult);
                    }
                }.bind(this)
            );
        }
    }
);

Answer 1

问题是这段代码：

geoCodeRequest: function( request ) {
    this.service.geocode( request, function( result, status ) {
        if (status == google.maps.GeocoderStatus.OK) {
            this.tempResult = result[0];
            console.debug( this.tempResult );
        } else {
            alert( 'GeoCoder request failed!' );
        }
    }.bind(this) );
},

this.geoCodeButton.click( function() {
    this.geoCodeRequest({
        address: this.geoCodeInput.val()
    });
    this.callback( this.tempResult );
}.bind(this) );

（对不起，但我冒昧地重新格式化，所以我可以更好地遵循逻辑。随意转换回你自己的风格。）

您尝试在地理编码结果从服务器返回之前调用this.callback()。那不行。您需要在地理编码器使用的回调中处理地理编码结果。

您已经在geoCodeRequest()方法中为地理编码器提供回调，因此您可以执行的操作是向点击处理程序添加回调，并从geoCodeRequest()中的回调中调用该回调。你可以这样做：

geoCodeRequest: function( request ) {
    this.service.geocode( request, function( result, status ) {
        if (status == google.maps.GeocoderStatus.OK) {
            request.success( result[0] );
        } else {
            request.failure( status );
        }
    }.bind(this) );
},

this.geoCodeButton.click( function() {
    this.geoCodeRequest({
        address: this.geoCodeInput.val(),
        success: function( result ) {
            console.debug( result );
            this.callback( result );
        },
        failure: function( status ) {
            alert( 'GeoCoder request failed!' );
        }
    });
}.bind(this) );

请注意，我还添加了一个故障回调来处理错误情况。

reverseGeoCodeButton.click()处理程序具有相同的问题，可以使用相同的解决方案进行修复。

这与您原来的方法很接近，但我不得不怀疑代码是否可以简化。您需要这些级别的代码吗？在任何情况下，无论你在处理异步结果（如地理编码器给你的异常结果），你都必须在适当的回调中处理，而不是在地理编码器（或任何异步函数）返回之后。

分配给对象后，变量仍为null

1 个答案: