您需要 2 个事件来完成此操作。
- 您的按钮的
onClick 事件，用于执行 google 地图请求并将数据保存到本地表单中
-
onSubmit 表单的事件。您将使用此事件来查看表单是否可提交。基本上，在允许表单提交之前检查以确保您的谷歌地图请求已运行并已完成。
例子：
<script>
var googleMapsDone = false;
$('#gmap_button').click(function(event)
{
doGoogleMapThing(function()//callback from googlemaps
{
//save data to local form for processing by script once posted
googleMapsDone = true;
});
});
$('#form').submit(function(event)
{
//check to see if we did our google maps stuff, and that its done
if (false == googleMapsDone)
{
event.preventDefault();
return false;
}
});
</script>
使用该代码，任何时候用户等待谷歌地图并点击提交，都不会发生任何事情。他们将不得不等待 GMaps 的响应，然后单击提交。这对于某些事情是可以的，但是如果您尝试对不需要用户输入/交互/反馈的 GMap 进行后台请求（可能在提交表单时获取其地址的 Long/Lat），那么您可以修改代码当您收到回复时，可以发布一点。一个例子是：
<script>
var googleMapsDone = false, submitWaiting = false;
$('#gmap_button').click(function(event)
{
doGoogleMapThing(function()//callback from googlemaps
{
//save data to local form for processing by script once posted
googleMapsDone = true;
/* check to see if submitWaiting is TRUE. If it is, automatically
post the form when we get the response.
*/
if (submitWaiting)
{
$('#form').submit();
}
});
});
$('#form').submit(function(event)
{
//check to see if we did our google maps stuff, and that its done
if (false == googleMapsDone)
{
event.preventDefault();
/* set our submitWaiting flag which we will use in our clalback
so when we get our google maps response, we post our form right
away
*/
submitWaiting = true;
/* You might want to display a modal or some other kind of notification
that the form post is 'working' or 'processing' so when the user
clicks it and doesn't see anything happening, they don't bail
or click it 800 times out of frustration
*/
return false;
}
});
</script>
编辑：我意识到我在下面关于它如何工作的评论......很难理解，所以让我在这里解释一下，然后展示一个替代方案。
- 用户填写表单
- 用户单击按钮在 google 地图上执行操作（示例是在我知道 GMaps 请求的范围/上下文之前编写的，所以这就是这样做的原因）
- 如果用户在 GMap 请求完成之前点击“提交”，我们会取消提交并设置标志
submitWaiting
- GMaps 请求返回，并执行我们的回调。我们的回调知道如何查找
submitWaiting，如果设置为true，它会提交表单
对此的替代方法是，您可以将事件更改为地址输入框的 onChange 事件，而不是要求用户交互 GMaps 请求，或者您可以通过提交按钮/事件完成所有操作，如下所示：
<script>
$('#form').submit(function(event)
{
//lets look up our user's address!
doGoogleMapThing(function()//callback from googlemaps
{
//do stuff with your inputs, or whatever
$('#form').submit();
});
event.preventDefault();
return false;
});
</script>
编辑 注意：以上示例假设您使用的是 jquery，并且您的 google map API 请求是通过 javascript 完成的
如果您的 google map api 请求未使用 google maps javascript 库，这仍然是可能的，只需要您通过本地域上的 php 脚本为 API 制作“代理”脚本。 （浏览器限制）。应该是这样的：
<script>
function doGoogleMapThing(callback_when_done)
{
$.post("/path/to/proxy/script.php", { data: to, post: to_server }, function(response)
{
//check & parse response
callback_when_done(/* Data needed to populate form */);
});
}
</script>
注意：这两个示例都假定使用 jquery。因为……嗯……你为什么不呢。
以下是您的确切脚本的实现。我稍微改了一下以使用 jquery，因为它让事情变得不那么痛苦了。
<script type=”text/javascript”
src=”http://maps.google.com/maps/api/js?sensor=false”></script>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type=”text/javascript”>
function codeAddress(callback)
{
var address = $('#address').val();
geocoder.geocode( { 'address': address}, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
$('#latitude').val( results[0].geometry.location.latitude );
$('#longitude').val( results[0].geometry.location.longitude );
if (typeof callback != 'undefined') //call the callback.
{
callback(true);
}
}
});
/* Just in case google returns a bad response or doesn't return at all
we need to add a timeout that will call the callback after 10 seconds
just so we make sure our user doesn't hang.
*/
setTimeout(function(){
callback(false); //pass false indicating no/invalid response
}, 10000); //10000ms = 10s
}
/* We are using the reallySubmit variable as a flag here, to know when we finish
our call to google maps and that we want to really submit our form.
we have to do this because the form.submit() call fires the form's submit event
again, and we end up going into an infinite loop.
an alternative to this would be to bind your form processing to the form's submit
button's click event. that should also pick up any presses of the enter key, also.
the solution below also works.
*/
var reallySubmit = false;
$('#form').submit(function(event)
{
if (false == reallySubmit)
{
//lets look up our user's address!
codeAddress(function(success)//callback from googlemaps
{
reallySubmit = true;
$('#form').submit();
});
event.preventDefault();
return false;
}
});
</script>