javascript - 谷歌地图调用完成后运行函数

Question

当用户在表单中输入其他详细信息时，我正在尝试收集他们的位置数据。所以我有一个谷歌地图，用户可以在上面移动标记，但我也有一个输入，他们可以在其中输入位置。

当他们点击提交表单时，我想首先对他们输入的位置进行地理编码，并在实际提交之前更新表单中隐藏的 lat lng 输入。

我知道网上有很多信息，但我已经阅读了大量教程，但我很难理解或至少将这些教程应用到我的情况中。

因此，当用户单击“提交”时，我想运行地理编码，并且仅在地理编码明确完成时才提交表单。

$('.submitButton').click(function () {
    geocode();
            $("#searchForm").submit();//Then submit when geocode finishes
});

以及地理编码函数

function geocode(){
 geocoder.geocode({
        address: $('#address').val()
    }, function(results, status){
        if(status == google.maps.GeocoderStatus.OK){
         var geoPoint = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
            map.setCenter(geoPoint);
            circle.setCenter(geoPoint);
            marker.setPosition(geoPoint);
           $('#lat').val(geoPoint.lat());
           $('#lng').val(geoPoint.lng());
        } else{
            alert("Can not geolocate this address.");
        }
    });
}

有人可以向我解释一下我需要用简单的 javascript 虚拟语言做什么吗？谢谢

Answer 1

由于地理编码服务是异步的，geocode() 将几乎立即返回，并且 $("#searchForm").submit() 将提交可用的内容，这将错误(旧的或未定义的数据)。

您必须在设置 lat/lng 值之后将表单提交调用移至 geocode() 函数:

    ...
        marker.setPosition(geoPoint);
       $('#lat').val(geoPoint.lat());
       $('#lng').val(geoPoint.lng());

       $("#searchForm").submit();
    } else{
    ...

如果，正如您在评论中所说，geocode()函数也在其他地方使用，那么您将不得不编写另一个具有类似功能的函数或准备两个不同的回调函数。