使用jQuery检测Google地图路线何时完成

时间:2014-03-15 11:05:35

标签: jquery ajax google-maps

我正在绘制地图的指示,由于许可限制,我需要链接多个电话。通过地图API,我可以检测地图何时完成渲染,但这不包括绘制到地图的路线。我想调用一个函数在路径完成渲染时显示一个按钮。这是我的代码:

// render the map from all points in the array
function renderMap() {
    $('.allRunners').hide(); // temp hide the button
    var ds = new google.maps.DirectionsService();
    var points = new Array();

    for (i = 0; i < routeData.length; i++) {
        if (routeData[i].type == "free") {
            processPolyLeg(routeData, i);
        } else {
            processLeg(routeData, i, ds);
        }
    }

    updateUnitMarkers();
    updateDistance();
}

我尝试使用jQuery延迟对象来检测renderMap函数何时完成,但我认为我的目标是错误的函数,因为这几乎立即发生。

$.when(renderMap()).done(function () {
    $('.allRunners').show();
});

我认为我需要定位renderLeg函数以了解上次调用它的时间,但是这个函数,如下所示,传递给它的params,当我想使用deferred时,它们不一定可用对象:

// when redrawing we need to wrap the asynchronous call to make it plot properly.
function processLeg(routeData, i, ds, retry) {
    // set up the initial request object
    var request = {
        origin: routeData[i].origin,
        destination: routeData[i].destination,
        travelMode: google.maps.DirectionsTravelMode.WALKING
    };

    ds.route(request, function (response, status) {
        if (status === google.maps.DirectionsStatus.OK) {
            // render the leg and set the renderer
            renderLeg(routeData, i, response);
            if (retry) {
                updateUnitMarkers();
                updateDistance();

            }
        } else if (status === google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
            setTimeout(function () {
                //retry
                processLeg(routeData, i, ds, true);

            }, 200);
        }
    });
}

// renders a leg to the map and updates the reference to the renderer
function renderLeg(routeData, i, response) {
    var dr = new google.maps.DirectionsRenderer({
        'draggable': false,
        'map': map,
        'preserveViewport': true,
        'suppressMarkers': true,
        'polylineOptions': { strokeColor: "#368CB9", strokeOpacity: 1, strokeWeight: 4 }
    });

    // render this step of the route to the map
    dr.setDirections(response);
    routeData[i].renderer = dr;
}

有什么想法吗?

0 个答案:

没有答案