谷歌地图api路线服务提供OVER_QUERY_LIMIT,同时显示多个标记javascript之间的路线

时间:2017-03-15 07:00:04

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

我正在使用具有驱动程序跟踪模块的项目。 我在我的数据库中有一个lat / long,我在日期和用户名上提取它。

目前的实施工作正常,10纬度/长约。但是当它具有更多纬度/长度时,它只是在前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]);
                }
            }
        });

    }
} 

结果如下。

enter image description here

我已经厌倦了在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);

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

1 个答案:

答案 0 :(得分:5)

我认为您可以在Maps JavaScript API的官方文档中轻松找到答案和解释:

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

  

无论有多少用户共享同一项目,服务请求都是每个用户会话的速率限制。首次加载服务API时,将为您分配初始请求配额。使用此配额后,API会按每秒对其他请求强制执行速率限制。如果在特定时间段内发出的请求太多,则API会返回OVER_QUERY_LIMIT响应代码。每会话速率限制可防止对批处理请求使用客户端服务。对于批量请求,请使用Maps API Web服务。

这意味着当您加载页面时,您有一个初始请求方向服务(我相信这是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,......秒后执行以下请求。