0

私はJavaScriptを初めて使用しますが、このロジックを実現できるコードを作成するのに苦労しています:

私は次のロジックを達成しようとしています:

  1. ユーザーが場所ボックスにテキストを入力し、自動提案をクリックする場合は、ジオコーディングし、コード化フラグを「True」に設定します

  2. ユーザーが場所にテキストを入力した場合、自動提案をクリックしないでください コード化されたフラグを「False」のままにしてください

  3. ユーザーが場所ボックスのテキストを変更した場合は、「コード化された」フラグが「false」に設定されていることを確認してください - テキストが現在取得した座標と一致しないため

  4. ユーザーが検索ボタンをクリックした場合 「コード化された」フラグを確認する true の場合、フォームを送信する false の場合、ジオコードを処理し、成功した場合はフォームを送信する

行き詰まるまでの距離は次のとおりです: LINK

自動提案されたリンクをクリックしてジオコードを開始し、入力ボックスのコンテンツを変更しない場合でも、検索を押すと、「場所はジオコードされていません - 最初に場所を処理します」と表示されます。プログラミングのロジックが間違っているように感じますが、多くの醜い反復コードなしで修正する方法がわかりません。

完全なコード

geocode();

// SET COOKIE FOR TESTING PURPOSES   
    $.cookie("country", "uk");

    // GEOCODE FUNCTION
    function geocode() {

        var coded = false;
        console.log(coded);
        var input = document.getElementById('loc');
        var options = {
            types: ['geocode']
        };
        var country_code = $.cookie('country');
        console.log(country_code);
        if (country_code) {
            options.componentRestrictions = {
                'country': country_code
            };
        }
        var autocomplete = new google.maps.places.Autocomplete(input, options);
        google.maps.event.addListener(autocomplete, 'place_changed', function() {
        processLocation();
        });

// ON SUBMIT - WORK OUT IF WE ALREADY HAVE THE RESULTS FROM AUTOCOMPLETE FUNCTION
        $('#searchform').on('submit', function(e) {
             console.log(coded);
             e.preventDefault();
             if(coded == true) {
                console.log("Location already geocoded - Submitting form");
                $('#searchform').submit();
             }
            else {
                console.log("Location not geocoded - Process location first");
                processLocation();   
            }
        });

// CHECK TO SEE IF INPUT HAS CHANGED SINCE BEING GEOCODED
// IF "CODED" VAR IS FALSE THEN WE WILL GEOCODE WHEN SEARCH BUTTON HIT         
        $("#loc").bind("change paste keyup", function() {
             var coded = false;
             console.log("Content changed - Coordinates no longer valid");
        });

    };  

// GEOCODE THE LOCATION
    function processLocation(){

            var geocoder = new google.maps.Geocoder();
            var address = document.getElementById('loc').value;
            geocoder.geocode({
                'address': address
            },

// RESULTS - STORE COORDINATES IN FIELDS OR ERROR IF NOT SUCCESSFUL
            function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    var coded = true;
                    console.log("Geocode Successful");
                    $('#lat').val(results[0].geometry.location.lat());
                    $('#lng').val(results[0].geometry.location.lng());
                } else {
                    var coded = false;
                    console.log("Geocode unsuccessful");
                    alert("Sorry - We couldn't find this location. Please try an alternative")
                }

            });
}
4

1 に答える 1

1

使用しているローカル変数が多すぎますcoded。グローバル フラグを 1 つ定義してから、set を使用する必要があります。

あなたがそうするとき

function geocode() {
    ....
    var coded = false;
    .....
}

function processLocation(){
    ....
     var coded = true;
     ....
}

これらは同じではありませんcoded。グローバルにアクセスするには。あなたは次のようなことをすることができます

var coded = false; //initialize with a proper default value function geocode() {
function geocode() {
    .... 
    coded = false;
    .....
 }

function processLocation(){
    ....
    coded = true;
    ....
}

すべての関数の外に置いて、変数なしcodedでアクセスしていることに注意してください。このトピックについてよく読んでください。

于 2013-05-15T12:21:54.697 に答える