1

这是我的 HTML 代码：

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">           
        </script>

        <script>
            function getCords(){
                var x=document.forms["get_loc"]["loc"].value;
                var y=x.replace(" ","+");
                $.getJSON("http://maps.google.com/maps/geo?q=%22"+y+"%22&key=%22My_Google_API_Key%22&sensor=false&output=json",
                    function(data, textStatus){
                        //alert(data.Placemark[0].Point.coordinates[0]);
                        //document.getElementById("MyDiv").innerHTML=data.Placemark[0].Point.coordinates[0] 
                        $("#lon").val(data.Placemark[0].Point.coordinates[1]);
                        $("#lat").val(data.Placemark[0].Point.coordinates[0]);
                    console.log(data);
                });
            return true;            
            }
        </script>

    </head> 

    <body>
        <form name="get_loc" id="get_loc" action="get_loc.php" onsubmit="return getCords()" method="post">
        Location:   <input type="text" name="loc" id="loc"/></br>
        <input type="hidden" name="lat" id="lat" value="0"/>
        <input type="hidden" name="lon" id="lon" value="0"/>
        <input type="submit" value="Submit" id="submit_button"/></br>
        </form>
    </body> 
</html>

现在，我要做的是使用此函数获取位置的坐标，并将其传递给单独的 PHP 文件以执行某些数据库操作。但是当我尝试获取打印在 PHP 文件中的值时，纬度和经度仍然显示为 0。

这里出了什么问题？

P：S：当返回错误并检查警报时，它给了我正确的纬度。所以它不是谷歌API的错误。

4

2 回答 2

0

有两件事几乎注定了你正在尝试做的事情。你不能像那样 ajax 到谷歌，跨域安全限制。而且“你的谷歌 api 密钥”不起作用。客户端浏览器只能是您，或者是愿意使用它的拥有自己密钥的人。

于 2013-02-17T09:57:13.540 回答
0

以这种方式提交表单的事情是这样的：您在提交表单的确切时刻调用了一个 javascript 函数。这不会取消实际的表单提交，并且 javascript-function (Async) 没有时间设置字段。在异步请求完成之前，页面已经消失了。

幸运的是，您可以取消原始事件，并在获取 api 的结果后，提交表单。不要忘记这可能需要一些时间并且用户不知道发生了什么，通过显示某种“加载程序”让他们知道正在发生的事情。

此外，使用 jQuery 提交事件将 html 与 javascript 分开。这是如何工作的：

<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">           
    </script>

    <script>
        function getCords(event){

            event.preventDefault();
            var callingForm = $(this);                
            var location = callingForm.find("#loc").val();
                location = location.replace(" ","+");
            $.getJSON("http://maps.google.com/maps/geo?q=%22"+y+"%22&key=%22My_Google_API_Key%22&sensor=false&output=json",
                function(data, textStatus){
                    //alert(data.Placemark[0].Point.coordinates[0]);
                    //document.getElementById("MyDiv").innerHTML=data.Placemark[0].Point.coordinates[0] 
                    $("#lon").val(data.Placemark[0].Point.coordinates[1]);
                    $("#lat").val(data.Placemark[0].Point.coordinates[0]);
                console.log(data);
                callingForm.submit();
            });
        return false;            
        }
        $(".jsFormSubmit").submit(getCords);


    </script>

</head> 

<body>
    <form name="get_loc" id="get_loc" class="jsFormSubmit" action="get_loc.php" method="post">
    Location:   <input type="text" name="loc" id="loc"/></br>
    <input type="hidden" name="lat" id="lat" value="0"/>
    <input type="hidden" name="lon" id="lon" value="0"/>
    <input type="submit" value="Submit" id="submit_button"/></br>
    </form>
</body>

于 2013-02-17T10:36:15.213 回答