通過使用.getJSON谷歌地圖api

Question

我想要有一個函數來計算谷歌地圖的路線動態地更改基於從.getJSON檢索到的數據。我已經嘗試在.done函數下包含函數calcRoute（）的大部分內容，但是我在javascript控制檯中收到屬性waypoint中的錯誤。我無所適從，因爲當我在.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>'; 
    } 
}