多个Google地图路线请求会返回所有请求的最后回复

时间:2014-04-23 15:10:20

标签: javascript jquery ajax google-maps google-maps-api-3

我正在尝试使用Google地图路线服务返回同一路线的三种旅行方式(驾驶,步行和骑自行车)。我可以成功遍历方法数组并将它们放入相关请求中,但所有三个请求都返回骑自行车的响应,即数组中的最后一个方法。这与发送给Google的异步请求有关吗?

有问题的代码似乎出现在此代码中的每个循环中:

directionsDisplay = new google.maps.DirectionsRenderer();
var origin = new google.maps.LatLng(51.5072, 0.1275);
var destination = new google.maps.LatLng(53.7997, 1.5492);
map = new google.maps.Map(document.getElementById('map-canvas'));
var request = {
    origin: origin,
    destination: destination
};
var methods = new Array("DRIVING", "WALKING", "BICYCLING");
var route = new Array();
$.each(methods, function(key, method) {
    request.travelMode = google.maps.TravelMode[method];
    console.log(request.travelMode);
    directionsService = new google.maps.DirectionsService();
    directionsService.route(request, function(response) {
        directionsDisplay.setDirections(response);
        route[method] = directionsDisplay.getDirections();
        console.log(route[method].routes[0].legs[0].steps[0].travel_mode);
        //console.log(route.routes[0].legs[0].duration.text);
        //console.log(Math.round(Math.round(route.routes[0].legs[0].distance.value/1000)*0.6214));
    });
});

请查看this jsfiddle中的代码以查找完整代码。将要发送的方法打印在控制台中,然后是响应中包含的行程方法。

1 个答案:

答案 0 :(得分:1)

request是一个参考,此引用的所有更改都将在您使用此引用的任何位置显示。

创建请求副本(使用所需的travelMode)并将此副本用作route()的参数

directionsService.route($.extend({},
                                 request,
                                 {travelMode: google.maps.TravelMode[method]}), 
                        function(response) {/*your code */});

更新了小提琴:http://jsfiddle.net/FLT2n/5/