地理编码函数在初始化中调用时有效,但在 onclick 脚本中无效

发布于 2024-08-13 15:59:14 字数 1958 浏览 3 评论 0原文

我正在使用谷歌地图 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&amp;v=2&amp;sensor=false&amp;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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

饮惑 2024-08-20 15:59:14

在我看来,在 onclick 事件上调用 codeAddress(); 后,您的 POST 会立即完成。因此,您看起来代码失败了,但实际上它正在工作。

你可以做的是:

1)删除表单,只是使用 onclick 事件的按钮。示例:

<input type="button" value="Submit" onclick="codeAddress();" />

2) 通过添加 return false;,在事件 onclick 命中时禁用提交表单。例子:

<form action="" method="POST">
<!-- stuff -->
<input type="Submit" value="Submit" onclick="codeAddress();return false;" />
</form>

Looks to me right after codeAddress(); is called on the onclick 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:

<input type="button" value="Submit" onclick="codeAddress();" />

2) Disable submitting form when event onclick hits by adding return false;. Example:

<form action="" method="POST">
<!-- stuff -->
<input type="Submit" value="Submit" onclick="codeAddress();return false;" />
</form>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文