Question

我有一些jQuery代码使用Google Maps Geocoding API将地址转换为坐标，然后使用alert()在弹出窗口中显示结果。这是可以正常工作的代码：

$("#searchbox_form #search_button").click(function(e){
    e.preventDefault();
    var address = $("#location").val();
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            $("input#user_lat").val(results[0].geometry.location.lat());
            $("input#user_lng").val(results[0].geometry.location.lng());
            alert("lat: " + $("input[name='user_lat']").val());
            alert("lng: " + $("input[name='user_lng']").val());
        }
    }); 



});

但是现在我希望jQuery在用户关闭警告框后提交表单$searchbox_form。但是，在代码块末尾添加$("#searchbox_form").submit();会在警报框出现之前提交表单。这也会导致表单在之前提交 Google Maps地理编码器返回结果。

如何在表单提交之前允许地理编码器返回结果？

与上面的代码相同，但最后还有1行要提交表单：

$("#searchbox_form #search_button").click(function(e){ e.preventDefault(); var address = $("#location").val(); var geocoder = new google.maps.Geocoder(); geocoder.geocode({'address': address}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { $("input#user_lat").val(results[0].geometry.location.lat()); $("input#user_lng").val(results[0].geometry.location.lng()); alert("lat: " + $("input[name='user_lat']").val()); alert("lng: " + $("input[name='user_lng']").val()); } }); $("#searchbox_form").submit(); //THIS IS THE ADDED LINE OF CODE!! });

Answer 1

您需要将回调中的提交移动到地理编码功能。原因是，它是异步的而不是按直接顺序运行，所以它调用地理编码然后立即触发提交。如果你把它放在下面，表单将在回调时和警报后提交（因为警报会阻止线程）。

$("#searchbox_form #search_button").click(function(e){
    e.preventDefault();
    var address = $("#location").val();
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({'address': address}, function(results, status) {
        // This function is async
        if (status == google.maps.GeocoderStatus.OK) {
            $("input#user_lat").val(results[0].geometry.location.lat());
            $("input#user_lng").val(results[0].geometry.location.lng());
            alert("lat: " + $("input[name='user_lat']").val());
            alert("lng: " + $("input[name='user_lng']").val());

            $("#searchbox_form").submit();
        }
    }); 

});

Answer 2

为什么不在完成回调后提交它？

$("#searchbox_form #search_button").click(function(e){
    e.preventDefault();
    var address = $("#location").val();
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            $("input#user_lat").val(results[0].geometry.location.lat());
            $("input#user_lng").val(results[0].geometry.location.lng());
            alert("lat: " + $("input[name='user_lat']").val());
            alert("lng: " + $("input[name='user_lng']").val());
            $("#searchbox_form").submit();
        }
    }); 


});

Answer 3

我认为geocoder.geocode是一个异步函数。因此，您需要在警告框之后提交。

$("#searchbox_form #search_button").click(function (e) {
    e.preventDefault();
    var address = $("#location").val();
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({ 'address': address }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            $("input#user_lat").val(results[0].geometry.location.lat());
            $("input#user_lng").val(results[0].geometry.location.lng());
            alert("lat: " + $("input[name='user_lat']").val());
            alert("lng: " + $("input[name='user_lng']").val());

            $("#searchbox_form").submit();
        }
    });
});

在alert（）完成后提交表单

3 个答案: