如何同步调用谷歌方向api来请求服务器端的服务？答案

【问题标题】：How to make synchronous call to google direction api for requesting the services on serverside?如何同步调用谷歌方向api来请求服务器端的服务？
【发布时间】：2015-05-14 07:20:04
【问题描述】：

How do I get JSON from google directions api using jQuery?

我需要按照上面链接中提到的“eithel”提出请求，因为我正在发出多个请求，并且我需要所有人的响应并且需要继续。如果我使用来自客户端的服务请求，则从一个响应到下一个响应会有延迟，并且由于它是异步的，当我收到响应时，我的下一组代码将被执行，而我真的不想要即将发生。但是，如果我通过 ajax 使用来自服务器端的服务请求，我可以使其同步和锻炼。我可以为“geocode”执行此操作，但对于“distancematrix”，我收到错误消息“请求的资源上不存在'Access-Control-Allow-Origin'标头。因此不允许访问Origin'null'”。有什么解决方法吗，请帮我解决这个问题。

我正在尝试找到地址之间的距离并将它们放入矩阵中，有两种方式，一种是“来自客户端的服务请求”

window.findDistance = function(){
var distance = 0;
var matrixLength = address.length;
distanceArray = new Array(matrixLength);
for (var i = 0; i < matrixLength; i++) 
{
    distanceArray[i] = new Array(matrixLength);
}

for (var i=0;i<address.length;i++)
{
    for (var j=0;j<address.length;j++)
    {
        if(i==j)
        {
            distanceArray[i][j] = 0;
        }
        else
        {
            var directionsService = new google.maps.DirectionsService();
            var request = {
                    origin:address[i],
                    destination:address[j],
                    travelMode: google.maps.DirectionsTravelMode.DRIVING
                    };
            directionsService.route(request, function(response, status)
            {
                if (status == google.maps.DirectionsStatus.OK)
                {
                    distance = response.routes[0].legs[0].distance.text;
                    distanceArray[x][y] = distance;
                }
            });

        }
    }
}
}

上面的代码不是同步的，j在我得到距离之前会递增并进行第二次迭代。如何在此处使用回调，以便仅在获得 distance 后才进行下一次迭代？

第二种方式是“从服务器端请求服务”

window.findDistance = function(){
var distance = 0;
var matrixLength = address.length;
distanceArray = new Array(matrixLength);
for (var i = 0; i < matrixLength; i++) 
{
    distanceArray[i] = new Array(matrixLength);
}
for (var i=0;i<address.length;i++)
{
    for (var j=0;j<address.length;j++)
    {
        if(i==j)
        {
            distanceArray[i][j] = 0;
        }
        else
        {
            var origin = address[i].replace(/ /g,"+");
            var destination = address[j].replace(/ /g,"+");
            var distanceUrl = "https://maps.googleapis.com/maps/api/distancematrix/json?origins="+origin+"&destinations="+destination+"";

            $.ajax({
            type: "GET",
            async: false,
            url: distanceUrl,
            success: function(data) {
                var locJSON=new Array();        
                locJSON=eval(data);
                distance = locJSON.response.routes[0].legs[0].distance.text;
                }   
            });
            distanceArray[i][j] = distance;
        }
    }
}
}

我不介意通过 async:false 使其同步，但这给了我一个错误，“请求的资源上没有 'Access-Control-Allow-Origin' 标头。来源'null' 因此不允许访问”。如何为此或服务器端代理实现 JSONP 或 CORS？

我对所有这些单词完全陌生。

【问题讨论】：

标签： jquery synchronous google-directions-api

【解决方案1】：

首先，从不使用async: false。同步请求会阻止 UI 更新，直到请求完成，这对用户来说很糟糕。看起来浏览器在那段时间里已经冻结了，因此这就是为什么它被认为是非常糟糕的做法。

相反，假设您的请求必须以特定顺序执行，请将它们链接起来，以便下一个请求发生在前一个请求的回调中。

其次，关于您从其中一个请求中得到的错误：

对于“distancematrix”，我收到错误消息“请求的资源上不存在'Access-Control-Allow-Origin'标头。因此不允许访问Origin'null'”

这意味着对该域的请求被Same Origin Policy 阻止。如果接收服务器支持它，您应该使用 JSONP 或 CORS。如果没有，您将需要使用服务器端代理来发出请求。

【讨论】：