Google Maps V3处理多个异步DirectionsService.route请求

时间:2017-03-10 08:45:50

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

Google Maps V3 api不允许请求超过23个航点。因此,我将航点分开,并使用多个directionsService.route函数分发它们。

function displayRoute(currentloc, waypoints, optimize, info) {
            var wypts = [];
            for (var i = 0; i < waypoints.length; i++) {
                wypts.push({
                    location: new google.maps.LatLng(waypoints[i].lat, waypoints[i].lng),
                    stopover: true
                });
            }

            //Count of route request
            lc = Math.ceil(wypts.length / 23);

            //Array of requests
            var mltwypts = [];
            var i, temparray;
            for (i = 0; i < lc; i++) {
                if (i === 0) {
                    temparray = wypts.slice(i * 23, (i + 1) * 23);
                    mltwypts.push({
                        start: currentloc,
                        wys: temparray.slice(0, temparray.length - 1),
                        end: temparray[temparray.length - 1].location
                    });

                } else {
                    temparray = wypts.slice(i * 23 - 1, (i + 1) * 23);
                    mltwypts.push({
                        start: temparray[0].location,
                        wys: temparray.slice(1, temparray.length - 1),
                        end: temparray[temparray.length - 1].location
                    });
                }
            }
            dds = [];//DirectionsRenderers array 
            if (mltwypts.length > 0) {
                for (var k = 0; k < mltwypts.length; k++) {
                    directionsService.route({
                        origin: mltwypts[k].start,
                        destination: mltwypts[k].end,
                        waypoints: mltwypts[k].wys,
                        optimizeWaypoints: optimize,
                        travelMode: google.maps.DirectionsTravelMode.DRIVING

                    }, function (response, status) {
                        if (status === 'OK') {
                            var directionsDisplay = new google.maps.DirectionsRenderer({preserveViewport: true});
                            directionsDisplay.setMap(map);
                            directionsDisplay.setDirections(response);
                            dds.push(directionsDisplay);

                            /*WHICH RESPONSE IS THIS?*/

                        } else {
                            window.alert('Directions request failed due to ' + status);
                        }
                    });
                }



            } else {
                $("#ttdist").html("");
                $("#tttime").html("");
                $("#routeDetail").html("");
            }
        }

正如您在代码中看到的,directionsService.route函数返回一个回调函数。但是我怎么知道哪些响应要求?那么如何在回调函数中传递k值?谢谢!

1 个答案:

答案 0 :(得分:1)

您可以这样做:

 for (var k = 0; k < mltwypts.length; k++) {
      function inner(index){
                directionsService.route({
                    origin: mltwypts[k].start,
                    destination: mltwypts[k].end,
                    waypoints: mltwypts[k].wys,
                    optimizeWaypoints: optimize,
                    travelMode: google.maps.DirectionsTravelMode.DRIVING

                }, function (response, status) {
                    if (status === 'OK') {
                        var directionsDisplay = new google.maps.DirectionsRenderer({preserveViewport: true});
                        directionsDisplay.setMap(map);
                        directionsDisplay.setDirections(response);
                        dds.push(directionsDisplay);

                        /*WHICH RESPONSE IS THIS?*/
                        // you can access the index here to determine which one it is.
                    } else {
                        window.alert('Directions request failed due to ' + status);
                    }
                });
      }
      inner(k);
}

或者你可以这样做:

mltwypts.forEach(function(value, index){
   directionsService.route({
                origin: value.start,
                destination: value.end,
                waypoints: value.wys,
                optimizeWaypoints: optimize,
                travelMode: google.maps.DirectionsTravelMode.DRIVING

            }, function (response, status) {
                if (status === 'OK') {
                    var directionsDisplay = new google.maps.DirectionsRenderer({preserveViewport: true});
                    directionsDisplay.setMap(map);
                    directionsDisplay.setDirections(response);
                    dds.push(directionsDisplay);

                    // You can use `value` or `index` to determine which one it is.
                } else {
                    window.alert('Directions request failed due to ' + status);
                }
            });
});