通过使用.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>'; 
    } 
}