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 : false を返し、アラートをチェックすると、正しい緯度が得られます。したがって、Google API のエラーではありません。

4

2 に答える 2

0

この方法でフォームを送信すると、次のようになります。フォームを送信しているまさにその瞬間に、javascript 関数を呼び出しています。これは実際のフォーム送信をキャンセルせず、JavaScript 関数 (非同期) にはフィールドを設定する時間がありません。async-request が完了する前に、ページは既になくなっています。

幸いなことに、元のイベントをキャンセルして、API の結果を取得した後、フォームを送信できます。これには時間がかかる可能性があり、ユーザーは何が起こっているのかを認識していないことを忘れないでください。何らかの「ローダー」を表示して、何かが起こっていることをユーザーに知らせてください。

また、jQuery submit イベントを使用して、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 に答える
0

2 つのことが、あなたがやろうとしていることをほぼ破滅させます。そのようにGoogleにajaxすることはできません。クロスドメインのセキュリティ制限です。そして、「あなたのGoogle APIキー」は機能しません。クライアント ブラウザは、あなただけであるか、それを使用する意思のある独自のキーを持っている人である必要があります。

于 2013-02-17T09:57:13.540 に答える