使用.getJSON for Google Maps API制作自定義航點

Question

我試圖有一個功能，用於基於從.getJSON檢索的數據來動態更改Google地圖的路線。 我嘗試在.done函數下包含大部分calcRoute（）函數，但是在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>';
                    }
                }
            });

        });
    }

Answer 1

我仍然不確定您的問題是什么，因為您顯示的代碼經過解析，至少應該在邏輯部分起作用。 但有些地方您不清楚要達到的目標：

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

如果您在這里期望data將變為json[1] ，那么您的假設是錯誤的。 $.getJSON始終返回jQuery XHR 。 當瀏覽器收到數據時，回調函數將在以后被調用。

這是一個了解異步工作原理的小示例：客戶端獲取請求的響應時（而不是在原始腳本完全執行之前）調用回調函數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>';
    }
}