Javascript 使用.getJSON for google maps api创建自定义航路点

我正在尝试使用一个函数来计算GoogleMaps的路由，该函数可以根据从.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>';
                    }
                }
            });

        });
    }

函数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'））
}，函数（json）{
返回json[1]；
});
data.done（函数（数据）{
waypts=数据[1]；
console.log（waypts）；//这将以正确的格式输出数组，即{location:city，state，stopover:true}。。。
var请求={
来源：start，
目的地:完，
航路点：航路点，
航路点：对，
travelMode:google.maps.Directions travelMode.DRIVING
};
路由（请求、功能（响应、状态）{
if（status==google.maps.directionstatus.OK）{
方向显示。设置方向（响应）；
var route=response.routes[0]；
var summaryPanel=document.getElementById（'directions_panel'）；
summaryPanel.innerHTML=''；
//对于每个管线，显示摘要信息。
对于（var i=0；i；
summaryPanel.innerHTML+=route.legs[i]。起始地址+'to'；
summaryPanel.innerHTML+=route.legs[i]。结束地址+'
'；
summaryPanel.innerHTML+=route.legs[i].distance.text+'

'；
}
}
});
});
}

我仍然不确定您的问题是什么，因为您展示的代码至少应该从逻辑部分开始工作。但有些部分不清楚您试图实现什么：

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

如果您在这里预期

数据

将成为

json[1]

，那么您的假设是错误的。

$.getJSON

始终返回jQuery XHR。稍后浏览器收到数据时将调用回调函数

下面是一个了解异步工作原理的小示例： 回调函数1和2是在客户端获得请求响应时调用的，但不是在原始脚本完全执行之前，因此在执行回调函数1和2之前总是调用

doSomethingElse（）

。 回调函数1和2的执行顺序取决于哪个响应首先到达

var test = [];
preparesSomeStuff();

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

});

doSomething();

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


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

var测试=[]；
preparesSomeStuff（）；
$.getJSON（“someurl1”，{}，function（）{
//回调函数1
});
doSomething（）；
$.getJSON（“someurl2”，{}，function（）{
//回调函数2
});
doSomethingElse（）；
//

如果您不想将整个代码都放在回调函数中（例如，因为可读性），可以通过以下方式执行：

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>';
    }
}

函数calcRoute（）{
var start=document.getElementById（'start'）.value；
var end=document.getElementById（'end'）.value；
var-waypts=[]；
$.getJSON（“/westcoast\u map.php”{
westcoast_id:$（'.opener'）.data（'westcoast_id'））
}，函数（数据）{
计算路线（数据[1]，开始，结束）；
});
//如果将代码放在这里，它将在调用displayResult之前执行，因为getJSON是异步的
}
功能计算路线（路线、起点、终点）{
console.log（waypts）；//这将以正确的格式输出数组，即{location:city，state，stopover:true}。。。
var请求={
来源：start，
目的地:完，
航路点：航路点，
航路点：对，
travelMode:google.maps.Directions travelMode.DRIVING
};
路由（请求、功能（响应、状态）{
if（status==google.maps.directionstatus.OK）{
显示结果（响应、状态）；
}
});
//如果您在这里放置一些代码，它将在调用displayResult之前执行，因为
//directionsService.route是异步的
}
功能显示结果（响应、状态）{
方向显示。设置方向（响应）；
var route=response.routes[0]；
var summaryPanel=document.getElementById（'directions_panel'）；
summaryPanel.innerHTML=''；
//对于每个管线，显示摘要信息。
对于（var i=0；i；
summaryPanel.innerHTML+=route.legs[i]。起始地址+'to'；
summaryPanel.innerHTML+=route.legs[i]。结束地址+'
'；
summaryPanel.innerHTML+=route.legs[i].distance.text+'

'；
}
}

我不确定您的问题是什么，如果您将当前在

.done（）

部分中的回调放在当前有`函数（json）{return json[1]；}的位置，有什么不起作用？当其余代码运行时，数组将保持为空，因为它是异步的；您能给我一个代码示例说明您的意思吗？我如何确保调用calculateRoute（waypts）？我在单击时调用calcRoute（）。@user1072337抱歉，这是一个错误。第一个回调应该是

calculateRoute

。。。