0

.getJSONから取得したデータに基づいてグーグルマップのルートを動的に変更する機能を作ろうとしています。関数calcRoute（）の大部分を.done関数に含めようとしましたが、JavaScriptコンソールのプロパティウェイポイントでエラーが発生します。.doneの下に関数の大部分を含めない場合、配列は空白のままになるため、何をすべきか途方に暮れています（.getJSONとの非同期呼び出し。より良いアイデアを提供するコードは次のとおりです。

    function calcRoute() {
        var start = document.getElementById('start').value;
        var end = document.getElementById('end').value;
        var waypts = [];
        var data = $.getJSON("/westcoast_map.php", {
            westcoast_id: $('.opener').data('westcoast_id')
        }, function(json) {
            return json[1];
        });

        data.done(function(theData) {
            waypts = theData[1];
            console.log(waypts); //this spits out the array in the proper format, i.e. {location:city, state, stopover:true},...etc...

            var request = {
                origin: start,
                destination: end,
                waypoints: waypts,
                optimizeWaypoints: true,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            };

            directionsService.route(request, function(response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                    var route = response.routes[0];
                    var summaryPanel = document.getElementById('directions_panel');
                    summaryPanel.innerHTML = '';
                    // For each route, display summary information.
                    for (var i = 0; i < route.legs.length; i++) {
                        var routeSegment = i + 1;
                        summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment + '</b><br>';
                        summaryPanel.innerHTML += route.legs[i].start_address + ' to ';
                        summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
                        summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';
                    }
                }
            });

        });
    }
4

1 に答える 1

0

あなたが示しているコードは、少なくとも論理的な部分から機能するはずなので、あなたが何を問題にしているのかはまだわかりません。しかし、何を達成しようとしているのかが明確でない部分があります。

    var data = $.getJSON("/westcoast_map.php", {
        westcoast_id: $('.opener').data('westcoast_id')
    }, function(json) {
        return json[1];
    });

data ここでそれがになることを期待しているならjson[1]、あなたの仮定は間違っています。 $.getJSON常にjQueryXHRを返します。コールバック関数は、後でブラウザがデータを受信したときに呼び出されます。

非同期がどのように機能するかを理解するための簡単な例を次に示します。クライアントがリクエストの応答を取得したときにコールバック関数1と2が呼び出されますが、元のスクリプトが完全に実行される前ではないためdoSomethingElse()、コールバック関数1と2の前に常に呼び出されます。実行されます。コールバック関数1および2が実行される順序は、どちらの応答が最初に到着するかによって異なります。

var test = [];
preparesSomeStuff();

$.getJSON("someurl1",{},function() {
   //Callback Function 1

});

doSomething();

$.getJSON("someurl2",{},function() {
   //Callback Function 2
});


doSomethingElse();
//<<END OF SCRIPT>>

コード全体をコールバック関数内に配置したくない場合（たとえば、読みやすさのため）、次の方法で実行できます。

function calcRoute() {
    var start = document.getElementById('start').value;
    var end = document.getElementById('end').value;
    var waypts = [];
    $.getJSON("/westcoast_map.php", {
        westcoast_id: $('.opener').data('westcoast_id')
    }, function(theData) {
        calcualteRoute(theData[1], start, end);
    });

    //if you place code here it will be executed before displayResult will be called because getJSON is async
}


function calcualteRoute(waypts, start, end) {
    console.log(waypts); //this spits out the array in the proper format, i.e. {location:city, state, stopover:true},...etc...

    var request = {
        origin: start,
        destination: end,
        waypoints: waypts,
        optimizeWaypoints: true,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };

    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            displayResult(response,status);
        }
    });

    //if you place some code here it will be executed BEFORE displayResult will be called, because 
    //directionsService.route is async

}

function displayResult(response, status) {
    directionsDisplay.setDirections(response);
    var route = response.routes[0];
    var summaryPanel = document.getElementById('directions_panel');
    summaryPanel.innerHTML = '';
    // For each route, display summary information.
    for (var i = 0; i < route.legs.length; i++) {
        var routeSegment = i + 1;
        summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment + '</b><br>';
        summaryPanel.innerHTML += route.legs[i].start_address + ' to ';
        summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
        summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';
    }
}
于 2013-03-05T07:07:31.063 に答える