如何为方向服务编写回调函数

How to write callback function for DirectionsService

本文关键字：写回 回调 函数 服务 方向      更新时间：2023-09-26

我正在使用谷歌API v3来绘制路线。我必须使用循环在地图上绘制许多路线，问题是由于函数调用是异步的，因此没有绘制某些路线。当我在函数中放置"警报"时，它可以工作。所以为了解决这个问题，我写了一个"回调"函数，但它不起作用，知道如何纠正它吗？

function plotRoute() 
 {        
    var count  = jsonObject[i].length-1;
    var count1 = jsonObject[i].length;
    var route_slipt = count1/7;
    color = "#"+((1<<24)*Math.random()|0).toString(16);
    var start_latlng = new google.maps.LatLng(start,end);
    var end_latlng   = new google.maps.LatLng(jsonObject[i][count].lat,jsonObject[i][count].lng);
    var travelWaypoints = [];
for(var j in jsonObject[i]) {
    travelWaypoints.push({location: new google.maps.LatLng(jsonObject[i][j].lat,jsonObject[i][j].lng),stopover:false});
        }
                        //alert(travelWaypoints);
        var request = {
                 origin      : start_latlng, 
                 destination : end_latlng,
                 waypoints   :travelWaypoints,
                     travelMode  : google.maps.DirectionsTravelMode.DRIVING
                         };
                        putRoute(request,color);
        }
    }


function putRoute(request,color,callback)
{
            //alert('Route Plotted');
            //setTimeout(function() {alert('hello');},1250);
            var color   = color;
            var request = request;
            directionsService.route(request, function(response, status) {
                     if (status == google.maps.DirectionsStatus.OK) 
                     {

                         var polylineOptionsActual = {
                                                      strokeColor  :color,
                                                      strokeOpacity: 1.0,
                                                      strokeWeight : 5,
                                                      };

                         var directionsRenderer = new google.maps.DirectionsRenderer;
                              directionsRenderer.setMap(map);
                              directionsRenderer.setOptions( { polylineOptions: polylineOptionsActual, suppressMarkers: true} );
                              directionsRenderer.setDirections(response);
                            // directionsDisplay.setDirections(response);
                            if (typeof callback === "function") {
                                                         callback(request);
                            }
                    }
                    else
                    {
                        alert("Directions request failed:" + status); 
                    }

                 });

}
putRoute(request,function() {
    //alert('Finished eating my sandwich.');
});

我的猜测是你从方向服务收到错误"OVER_QUERY_LIMIT"。如果您尝试太快地从地图 API 请求内容，它将超时。这基本上与在具有多个标记的自定义谷歌地图上避免地理编码限制的错误相同。

当您收到"OVER_QUERY_LIMIT"错误时，我发现最好在超时后重新发送请求。由于我无法访问您的路线或航点阵列，因此我只是使用了之前答案中的一些位置。

<!DOCTYPE html>
<html>
<head>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var directionsService = new google.maps.DirectionsService();
var address = ["Blaenwaun, Ffostrasol, Llandysul, SA44 5JT","Sophia House, 28 Cathedral Road, Cardiff, CF11 9LJ","The Science Park, Technology Drive, Bridgend, CF 31 3NA","The Parade, Cardiff University, Cardiff, CF24 3AA","Spring Gardens, Whitland, Carmarthenshire, SA34 0HR","1 Redcliffe Street, , Bristol, BS1 6NP","The Manse, Tabernacle Lane, Llanvaches, NP26 3BL","Tafarnaubach Industrial Estate, Tredegar, , NP22 3AA","Churchill House, Churchill Way, Cardiff, CF10 2HH","Glen Rosa, Llanellen, Abergavenny, NP7 9HF","Ferry Lane, Pembroke Dock, , SA71 4RE","10 North Road, , Cardiff, CF10 2HH","30-36 Newport Road, , Cardiff, CF24 0DE","suite 16, Cardiff Medicentre, Cardiff, CF14 4UJ","Unit 8, Withey Court,, Western Industrial Estate,, Caerphilly, CF83 1BF","Room 127 Wallace Building, College of Science, Swansea, SA2 8PP","Swansea University, Singleton Park, Swansea, SA2 8PP","Visualisation Centre, , Aberystwyth University, SY23 3BF","Commercial Services Office, , Pontypridd, CF37 1DL","Langford House, Lower Langford, Bristol, BS40 5DU","William Russell House, The Square, Surrey, GU18 5SS","Gleider House, Ty Glas Road, , CF14 5BD","Pencoed Technology Centre, , Bridgend, CF35 5HZ","Room 203, Digital Technium, Singleton Park, Swansea, SA2 8PP","114-116 St Mary Street, , Cardiff, CF10 1DY","Princess of Wales Hospital, Coity Road, Bridgend, CF31 1RQ","Eastgate Business Park, Wentloog Avenue, Cardiff, CF3 2EY","Axis 3, Axis Court, Riverside Business Park, Mallard Way, Swansea, SA7 0AJ"];
var timeout = 600;
function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(52.40, -3.61);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: 'roadmap'
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    plotRoutes();
}
function plotRoutes()  {
    for (var ix=0; ix < address.length-2; ix++) {
        color = "#"+((1<<24)*Math.random()|0).toString(16);
        var request = {
            origin      : address[ix],
            destination : address[ix+1],
            travelMode  : google.maps.DirectionsTravelMode.DRIVING
        };
        putRoute(request, color);
    }
}
function putRoute(request,color) {
    directionsService.route(request, function(response, status) {
         if (status == google.maps.DirectionsStatus.OK)
         {
             var polylineOptionsActual = {
                  strokeColor  :color,
                  strokeOpacity: 1.0,
                  strokeWeight : 5};
             var directionsRenderer = new google.maps.DirectionsRenderer;
             directionsRenderer.setMap(map);
             directionsRenderer.setOptions( { polylineOptions: polylineOptionsActual, suppressMarkers: true} );
             directionsRenderer.setDirections(response);
        }
        else
        {
            if (status == "OVER_QUERY_LIMIT")
            {
                setTimeout(function() { putRoute(request, color); }, (timeout));
            }
        }
     });
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="height: 80%; top:10px; border: 1px solid black;"></div>
</body>
</html>
相关文章：