javascript - 谷歌地图 api 方向服务在显示多个标记 javascript 之间的路线时提供 OVER_QUERY_LIMIT

Question

我正在使用具有驱动程序跟踪模块的项目。
我在我的数据库中经纬度，我正在获取它的日期和用户名。

当前的实现在大约 10 lat/long 下运行良好。但是当它有更多的纬度/经度时，它只是在前 10 个点之间绘制路径。

对于其他人，它的状态为 OVER_QUERY_LIMIT
正如其他人在 this 中建议的那样，我必须延迟每个方向服务的请求。

我搜索了很多，但找不到任何值得注意的解决方案。

这是我的代码。

var markers =   [{
    "Latitude": -33.7316000000,
    "Longitude": 151.0789000000
}, {
    "Latitude": -33.7316000000,
    "Longitude": 151.0788000000
}, {
    "Latitude": -33.7316000000,
    "Longitude": 151.0789000000
}, {
    "Latitude": -33.7316000000,
    "Longitude": 151.0789000000
}, {
    "Latitude": -33.7316000000,
    "Longitude": 151.0789000000
}, {
    "Latitude": -33.7247000000,
    "Longitude": 151.0859000000
}, {
    "Latitude": -33.7243000000,
    "Longitude": 151.0967000000
}, {
    "Latitude": -33.7198000000,
    "Longitude": 151.1062000000
}, {
    "Latitude": -33.7109000000,
    "Longitude": 151.1043000000
}, {
    "Latitude": -33.7029000000,
    "Longitude": 151.0992000000
}, {
    "Latitude": -33.7108000000,
    "Longitude": 151.1044000000
}, {
    "Latitude": -33.7186000000,
    "Longitude": 151.1101000000
}, {
    "Latitude": -33.7239000000,
    "Longitude": 151.1190000000
}, {
    "Latitude": -33.7313000000,
    "Longitude": 151.1253000000
}, {
    "Latitude": -33.7370000000,
    "Longitude": 151.1337000000
}, {
    "Latitude": -33.7438000000,
    "Longitude": 151.1409000000
}, {
    "Latitude": -33.7510000000,
    "Longitude": 151.1475000000
}, {
    "Latitude": -33.7584000000,
    "Longitude": 151.1537000000
}, {
    "Latitude": -33.7670000000,
    "Longitude": 151.1572000000
}, {
    "Latitude": -33.7732000000,
    "Longitude": 151.1652000000
}, {
    "Latitude": -33.7812000000,
    "Longitude": 151.1703000000
}, {
    "Latitude": -33.7869000000,
    "Longitude": 151.1788000000
}, {
    "Latitude": -33.7960000000,
    "Longitude": 151.1782000000
}, {
    "Latitude": -33.7987000000,
    "Longitude": 151.1796000000
}, {
    "Latitude": -33.8078000000,
    "Longitude": 151.1792000000
}, {
    "Latitude": -33.8169000000,
    "Longitude": 151.1794000000
}, {
    "Latitude": -33.8232000000,
    "Longitude": 151.1872000000
}, {
    "Latitude": -33.8245000000,
    "Longitude": 151.1979000000
}, {
    "Latitude": -33.8287000000,
    "Longitude": 151.2075000000
}, {
    "Latitude": -33.8378000000,
    "Longitude": 151.2071000000
}, {
    "Latitude": -33.8458000000,
    "Longitude": 151.2121000000
}, {
    "Latitude": -33.8546000000,
    "Longitude": 151.2092000000
}, {
    "Latitude": -33.8631000000,
    "Longitude": 151.2049000000
}, {
    "Latitude": -33.8720000000,
    "Longitude": 151.2028000000
}, {
    "Latitude": -33.8785000000,
    "Longitude": 151.2103000000
}, {
    "Latitude": -33.8841000000,
    "Longitude": 151.2018000000
}, {
    "Latitude": -33.8848000000,
    "Longitude": 151.1910000000
}, {
    "Latitude": -33.8860000000,
    "Longitude": 151.1802000000
}, {
    "Latitude": -33.8879000000,
    "Longitude": 151.1696000000
}, {
    "Latitude": -33.8881000000,
    "Longitude": 151.1587000000
}, {
    "Latitude": -33.8901000000,
    "Longitude": 151.1481000000
}, {
    "Latitude": -33.8860000000,
    "Longitude": 151.1384000000
}, {
    "Latitude": -33.8792000000,
    "Longitude": 151.1311000000
}, {
    "Latitude": -33.8720000000,
    "Longitude": 151.1244000000
}, {
    "Latitude": -33.8700000000,
    "Longitude": 151.1138000000
}, {
    "Latitude": -33.8687000000,
    "Longitude": 151.1031000000
}, {
    "Latitude": -33.8654000000,
    "Longitude": 151.0930000000
}, {
    "Latitude": -33.8624000000,
    "Longitude": 151.0828000000
}, {
    "Latitude": -33.8580000000,
    "Longitude": 151.0732000000
}, {
    "Latitude": -33.8550000000,
    "Longitude": 151.0629000000
}, {
    "Latitude": -33.8500000000,
    "Longitude": 151.0539000000
}, {
    "Latitude": -33.8439000000,
    "Longitude": 151.0459000000
}, {
    "Latitude": -33.8391000000,
    "Longitude": 151.0367000000
}, {
    "Latitude": -33.8344000000,
    "Longitude": 151.0273000000
}, {
    "Latitude": -33.8297000000,
    "Longitude": 151.0179000000
}, {
    "Latitude": -33.8271000000,
    "Longitude": 151.0073000000
}, {
    "Latitude": -33.8279000000,
    "Longitude": 150.9964000000
}, {
    "Latitude": -33.8234000000,
    "Longitude": 150.9869000000
}, {
    "Latitude": -33.8176000000,
    "Longitude": 150.9785000000
}, {
    "Latitude": -33.8171000000,
    "Longitude": 150.9677000000
}, {
    "Latitude": -33.8146000000,
    "Longitude": 150.9572000000
}, {
    "Latitude": -33.8122000000,
    "Longitude": 150.9467000000
}, {
    "Latitude": -33.8096000000,
    "Longitude": 150.9362000000
}, {
    "Latitude": -33.8064000000,
    "Longitude": 150.9261000000
}, {
    "Latitude": -33.8144000000,
    "Longitude": 150.9210000000
}, {
    "Latitude": -33.8232000000,
    "Longitude": 150.9183000000
}, {
    "Latitude": -33.8316000000,
    "Longitude": 150.9143000000
}, {
    "Latitude": -33.8366000000,
    "Longitude": 150.9053000000
}, {
    "Latitude": -33.8446000000,
    "Longitude": 150.9003000000
}]

var mapOptions = {
    center: new google.maps.LatLng(markers[0].Latitude, markers[0].Longitude),
    zoom: 10,
    scrollwheel: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);

var infoWindow = new google.maps.InfoWindow();
var lat_lng = new Array();
var latlngbounds = new google.maps.LatLngBounds();


for (i = 0; i < markers.length; i++) {
    var data = markers[i]
    var myLatlng = new google.maps.LatLng(data.Latitude, data.Longitude);
    lat_lng.push(myLatlng);
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: data.title

    });

latlngbounds.extend(marker.position);
(function(marker, data) {
    google.maps.event.addListener(marker, "click", function(e) {

        var html = "<b>Test</b>";
        infoWindow.setContent(html);
        infoWindow.open(map, marker, html);
    });
})(marker, data);
}
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);


var iconsetngs = {
    path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};

//Initialize the Direction Service
var service = new google.maps.DirectionsService();


var polylineoptns = {
    strokeOpacity: 0.8,
    strokeWeight: 3,
    strokeColor: '#4986E7',

    map: map,
    icons: [{
        repeat: '600px', //CHANGE THIS VALUE TO CHANGE THE DISTANCE BETWEEN ARROWS
        icon: iconsetngs,
        offset: '100%'
    }]
};

//Loop and Draw Path Route between the Points on MAP
for (var i = 0; i < lat_lng.length; i++) {
    if ((i + 1) < lat_lng.length) {
        var src = lat_lng[i];
        var des = lat_lng[i + 1];
        service.route({
            origin: src,
            destination: des,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        }, function(result, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                //Initialize the Path Array
                var path = new google.maps.MVCArray();
                var poly = new google.maps.Polyline(polylineoptns);

                poly.setPath(path);

                for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
                    path.push(result.routes[0].overview_path[i]);
                }
            }
        });

    }
} 

这是结果。



我已经厌倦了在forloop中以这种方式延迟方向服务的调用:

 setInterval(function() {

     var directionsRequest = {
         origin: src,
         destination: des,
         travelMode: google.maps.TravelMode.DRIVING
     };

     service.route(directionsRequest, function(result, status) {
         if (status === google.maps.DirectionsStatus.OK) {
             for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
                 var path = new google.maps.MVCArray();
                 var poly = new google.maps.Polyline(polylineoptns);
                 poly.setPath(path);

            for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
                path.push(result.routes[0].overview_path[i]);
               }
             }
         } else {
             console.log(status)
         }
     })

 }, 1000);

但它也给出了同样的地位!!

Answer 1

我想你可以很容易地在 Maps JavaScript API 的官方文档中找到答案和解释:

https://developers.google.com/maps/documentation/javascript/usage

Service requests are rate-limited per user session, regardless of how many users share the same project. When you first load the service API, you are allocated an initial quota of requests. Once you use this quota, the API enforces rate limits on additional requests on a per-second basis. If too many requests are made within a certain time period, the API returns an OVER_QUERY_LIMIT response code. The per-session rate limit prevents the use of client-side services for batch requests. For batch requests, use the Maps API web services.

这意味着当您加载页面时，您有一个初始的路线服务请求桶(我相信这是 10 个请求)，一旦您使用了 10 个初始请求，您每秒只能执行 1 个请求。因此，您必须等待一秒钟才能执行每个下一个方向请求。

代码片段可能类似于

var delayFactor = 0;

function m_get_directions_route (request) {
    directions.route(request, function(result, status) {
        if (status === google.maps.DirectionsStatus.OK) {
            //Process you route here
        } else if (status === google.maps.DirectionsStatus.OVER_QUERY_LIMIT) {
            delayFactor++;
            setTimeout(function () {
                m_get_directions_route(request);
            }, delayFactor * 1000);
        } else {
            console.log("Route: " + status);
        }
    });
} 

for (var i = 0; i < lat_lng.length; i++) {
    if ((i + 1) < lat_lng.length) {
        var src = lat_lng[i];
        var des = lat_lng[i + 1];

        var request = {
            origin: src,
            destination: des,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };

        m_get_directions_route (request);
    }
}

使用此代码，十个请求将立即执行，随后的请求将在 1、2、3、... 秒后执行。