0

住所を座標に変換するJavaScriptがあります。しかし、私が望むのは、ユーザーが入力フィールドに住所を入力すると、javascript がそれを緯度と経度に変換し、その結果を入力フィールドの下などの ap div に配置することです。

私が持っているJSコードは

    var latitude;
    var longitude;

    /*
    * Get the json file from Google Geo
    */
    function Convert_LatLng_To_Address(address, callback) {
            url = "http://maps.googleapis.com/maps/api/geocode/json?address=" + address + "&sensor=false";
            jQuery.getJSON(url, function (json) {
                Create_Address(json, callback);
            });        
    }

    /*
    * Create an address out of the json    
    */
    function Create_Address(json, callback) {
        if (!check_status(json)) // If the json file's status is not ok, then return
            return 0;
        latitude = json["results"][0]["geometry"]["location"]["lat"];
        longitude = json["results"][0]["geometry"]["location"]["lng"];
        callback();
    }

    /* 
    * Check if the json data from Google Geo is valid 
    */
    function check_status(json) {
        if (json["status"] == "OK") return true;
        return false;
    }
       <body>
        Address:
    <input type="text" id="address-input">
    City:
    <input type="text" id="city-input">
    Country:
    <input type="text" id="country-input">
    Postcode:
    <input type="text" id="address4">
    <input type="submit" id="submit" value="generate" onClick="AlertLatLng()">


    <p id="result"></p>




    <script>

var street_address = document.getElementById('address-input').value,
    city = document.getElementById('city-input').value,
    country = document.getElementById('country-input').value,
    postcode = document.getElementById('postcode-input').value;

var address = street_address + ' ' + city + ' ' + country + ', ' + postcode;

        // AlertLatLng is a callback function which will be executed after converting         address to coordinates
        Convert_LatLng_To_Address(address, AlertLatLng);     

        /*
        * Alert Latitude & Longitude
        */
        function AlertLatLng() {
    var result = "The latitude is " + latitude + " and longitude is " + longitude;
    document.getElementById('result').innerHTML=result;
}
</scrip>
  </body>

前もって感謝します ：）

4

2 に答える 2

0

javacsript を使用して、DOM 要素のコンテンツを設定できます。

JavaScript:

function AlertLatLng() {
    var result = "The latitude is " + latitude + " and longitude is " + longitude;
    document.getElementById('result').innerHTML=result;
}

これで<p id='result'>、入力フィールドの下にあるタグにメッセージが配置されます。

編集：

フォームの入力フィールドから JavaScript に情報を渡すには、入力フィールドの値を取得する必要があります (参照: HTML フォーム データを Javascript 関数に渡す)。要するに：

var address = "address+city+country,+postcode"

になり得る：

var street_address = document.getElementById('address1').value,
    city = document.getElementById('address2').value,
    country = document.getElementById('address3').value,
    postcode = document.getElementById('address4').value;
var address =  street_address + ' ' + city + ' ' + country + ', ' + postcode;

id入力タグには、より直感的な属性を使用することをお勧めします: id="city-input"、id="postcode-input"など。これにより、コードが読みやすくなる場合があります。

編集2：

簡単な補足として、コード スニペットの下部にある終了タグのスクリプトのスペルが間違っています。ほとんどの場合、ブラウザはこれを修正しますが、注意するだけの価値があるかもしれません。

あなたの質問の次の部分については...

緯度と経度の変数が で定義されているように見えます。これは、Google マップ API を呼び出す呼び出しCreate_Addressのコールバック関数です。jQuery.getJSONConvert_LatLng_To_Address

残念ながら、変数を設定する一番下の js コードはaddress、ページの読み込み時に 1 回しか実行されません。この結果、すべての変数が空の文字列または未定義になります。あなたは 1 回電話をかけるConvert_LatLng_To_Address(address, AlertLatLng)だけで十分ですが、フォームに情報を入力したら、これを実行したいと思うかもしれません。

フォームの送信アクションはAlertLatLng()、クリック イベントで呼び出します。一度だけではなく、送信時に入力フィールドにある情報を使用して、Google マップ API への新しい呼び出しを行うための呼び出しがおそらくあるはずです。

すべてのコードを単純な関数にラップすることをお勧めします

function getNewLatLng() {
    var street_address = document.getElementById('address-input').value,
    city = document.getElementById('city-input').value,
    country = document.getElementById('country-input').value,
    postcode = document.getElementById('postcode-input').value;

    var address = street_address + ' ' + city + ' ' + country + ', ' + postcode;

    // AlertLatLng is a callback function which will be executed after converting address to coordinates
    Convert_LatLng_To_Address(address, AlertLatLng);
}

次に、送信時に代わりにこの関数を実行するように HTML を編集します。

<input type="submit" id="submit" value="generate" onClick="getNewLatLng()">
于 2013-09-27T17:20:03.587 に答える
0

jquery が既にロードされているので、それを使用できます。

function AlertLatLng() {
    $("p#result").text("The latitude is " + latitude + " and longitude is " + longitude);
}

補足として、緯度と経度の変数を の callback() に渡す必要がありますCreate_Address。

于 2013-09-27T17:24:22.743 に答える