地理编码函数在初始化中调用时有效,但在 onclick 脚本中无效
我正在使用谷歌地图 API 进行一些地理编码。 用户在表单中填写一些地址,当单击提交按钮时,将调用 codeAddress() 函数,该函数应该执行地理编码,但它不起作用。 作为测试,我对地址进行了硬编码,并在文档处于初始化()时调用 codeAddress 函数。 当页面准备好时调用 codeAddress 时,它可以正常工作,但是当 onclick 脚本调用它时,它不起作用(firebug 没有返回错误!)。
有人可以帮忙吗? 谢谢
(您可以将代码粘贴到此处:http://code .google.com/apis/ajax/playground/?exp=maps#map_simple,或更改 google api 密钥)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps API Sample</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
codeAddress();
}
}
function codeAddress() {
var geocoder = new GClientGeocoder();
var address = "paseo montjuic, 30, barcelona, spain";
geocoder.getLatLng( address, function(point) {
if (point) {
alert(point);
} else {
alert("Geocode was not successful");
}
});
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()" style="font-family: Arial;border: 0 none;">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
<form action="" method="POST">
<!-- stuff -->
<input type="Submit" value="Submit" onclick="codeAddress();" />
</form>
</body>
</html>
I'm doing some geocoding using the google maps API.
The user fill a form with some address, and when the submit button is clicked, a codeAddress() function is called, which is supposed to perform the geocoding, but it does not work.
As a test, I hardcoded the address and call the codeAddress function when the document in an initialize().
When codeAddress is called when the page is ready, it works ok, but when it's called by the onclick script, it doesn't work (no errors returned by firebug!).
Anybody can help?
Thanks
(you can paste the code in here: http://code.google.com/apis/ajax/playground/?exp=maps#map_simple, or change the google api key)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps API Sample</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
codeAddress();
}
}
function codeAddress() {
var geocoder = new GClientGeocoder();
var address = "paseo montjuic, 30, barcelona, spain";
geocoder.getLatLng( address, function(point) {
if (point) {
alert(point);
} else {
alert("Geocode was not successful");
}
});
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()" style="font-family: Arial;border: 0 none;">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
<form action="" method="POST">
<!-- stuff -->
<input type="Submit" value="Submit" onclick="codeAddress();" />
</form>
</body>
</html>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
在我看来,在
onclick
事件上调用codeAddress();
后,您的 POST 会立即完成。因此,您看起来代码失败了,但实际上它正在工作。你可以做的是:
1)删除表单,只是使用 onclick 事件的按钮。示例:
2) 通过添加
return false;
,在事件 onclick 命中时禁用提交表单。例子:Looks to me right after
codeAddress();
is called on theonclick
event, your POST is done immediately. Thus it looks to you that the code failed, but in fact it is working.What you can do is:
1) Remove the form, just a button using the onclick event. Example:
2) Disable submitting form when event onclick hits by adding
return false;
. Example: