Javascript 请求实体太大-谷歌地图方向错误413

首先，我想说我对

谷歌地图Javascript API v3

不是很有经验（我唯一的经验就是最近3天）。我已设法显示带有标记列表的地图，并使用

DirectionsService

将它们连接起来，但有时我的列表相当大，我会出现以下错误：

Failed to load resource: the server responded with a status of 413 (Request Entity Too Large)

这是我的代码：

// List of all locations for device 
var locations = [];
// example: locations = [
//     {datetime: '2014/09/28 20:20', location: '41.99999 21.99999 30.0'},
//     ... {...} ... may be more than 200 entries for locations
//     {datetime: '2014/09/28 20:25', location: '41.99999 21.99999 30.0'}
// ]

var map;
var markers = [];
var bounds = new google.maps.LatLngBounds();
var pathPoints = [];
var infoWindow = new google.maps.InfoWindow();
var accuracy = new google.maps.Circle({
    fillColor: '#ff4080',
    fillOpacity: 0.5,
    strokeOpacity: 0,
    zIndex: 0
});
var path = new google.maps.Polyline(polyOptions);
var geocoder;
var directionsService = new google.maps.DirectionsService();
var directionsDisplay;
var polyOptions = {
    geodesic: true,
    strokeColor: '#28b8b8',
    strokeOpacity: 1.0,
    strokeWeight: 8,
    zIndex: 1
}
function showInfoWindow(marker, datetime, acc){
    geocoder = new google.maps.Geocoder();
    geocoder.geocode({
        'latLng': marker.getPosition()
    }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            if (results[1]) {
                infoWindow.close();
                var date = datetime.split(" ")[0];
                var time = datetime.split(" ")[1];
                var content = '<div class="infowindow">'
                        + results[1].formatted_address.trim() + '<br />'
                        + 'Date: ' + date + '<br />'
                        + 'Time: ' + time + '<br />'
                        + 'Accuracy: ' + acc + 'm'
                        + '</div>';
                infoWindow.setContent(content);
                infoWindow.open(map, marker);
                accuracy.setMap(null);
                accuracy.setMap(map);
                accuracy.setCenter(marker.getPosition());
                accuracy.setRadius(acc/1.6);
            } else {
                // alert('No results found');
            }
        } else {
            alert('Geocoder failed due to: ' + status);
        }
    });
}
function addMultiMarker(latLng, num, datetime, acc){
    // Create marker at provided location
    var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        icon: image_circle,
        title: 'Location #' + num,
        zIndex: num + 1
    });
    // On marker click center it inside map and show infoWindow
    google.maps.event.addListener(marker, 'click', function() {
        map.panTo(marker.getPosition());
        showInfoWindow(marker, datetime, acc);
    });
    return marker;
}
function showRoute() {
    var rendererOptions = {
        draggable: false,
        hideRouteList: true,
        suppressMarkers: true,
        infoWindow: infoWindow,
        polylineOptions: polyOptions,
        map: map
    };
    directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
    var len = markers.length;
    var start = markers[0].getPosition();
    var end = markers[len - 1].getPosition();
    new google.maps.event.trigger(markers[len - 1], 'click');
    var wayPts = [];
    for(var i = 1; i < len - 1; i++){
        wayPts.push({
            location: markers[i].getPosition(),
            stopover: true
        });
    }
    var request = {
        origin: start,
        destination: end,
        waypoints: wayPts,
        optimizeWaypoints: true,
        travelMode: google.maps.TravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        }
    });
}
function showMapPeriod(periodStart, periodEnd){
    // Simple map options
    var mapOptions = {
        zoom: 15,
        center: new google.maps.LatLng(41, 21),
        mapTypeId : google.maps.MapTypeId.ROADMAP,
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
            position: google.maps.ControlPosition.TOP_RIGHT
        },
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.LARGE,
            position: google.maps.ControlPosition.LEFT_CENTER
        },
        panControl: false,
        streetViewControl: false
    };
    $("#map").html("");
    // Create and show map
    openMapContainer(); // just a function that shows the map <div> element
    map = new google.maps.Map(document.getElementById('map'), mapOptions);
    // Create and display markers
    bounds = new google.maps.LatLngBounds();
    markers = [];
    var len = 0;
    for(var i = periodStart; i <= periodEnd; i++, len++){
        var loc_vals = locations[i].location.trim().split(" ");
        var lat = parseFloat(loc_vals[0]);
        var lng = parseFloat(loc_vals[1]);
        var acc = parseFloat(loc_vals[2]);
        // Create marker at provided location
        var datetime = locations[i].datetime;
        var latLng = new google.maps.LatLng(lat, lng);
        markers[len] = addMultiMarker(latLng, len+1, datetime, acc);
        bounds.extend(latLng);
    }
    showRoute();
    map.fitBounds(bounds);
}

//设备的所有位置列表
var位置=[]；
//示例：位置=[
//{datetime:'2014/09/28 20:20'，位置：'41.999999 21.99999 30.0'}，
//…{…}…可能有200多个位置条目
//{datetime:'2014/09/28 20:25'，位置：'41.999999 21.99999 30.0'}
// ]
var映射；
var标记=[]；
var bounds=new google.maps.LatLngBounds（）；
var路径点=[]；
var infoWindow=new google.maps.infoWindow（）；
var accurity=new google.maps.Circle({
填充颜色：'#ff4080'，
填充不透明度：0.5，
笔划不透明度：0，
zIndex:0
});
var path=new google.maps.Polyline（polypoptions）；
var地理编码器；
var directionsService=new google.maps.directionsService（）；
var方向显示；
var多选项={
测地线：正确，
strokeColor:“#28b8b8”，
笔划不透明度：1.0，
冲程重量：8，
zIndex:1
}
函数showInfoWindow（标记、日期时间、acc）{
geocoder=新的google.maps.geocoder（）；
地理编码({
“latLng”：marker.getPosition（）
}，功能（结果、状态）{
if（status==google.maps.GeocoderStatus.OK）{
如果（结果[1]）{
infoWindow.close（）；
var date=datetime.split（“”[0]；
var time=datetime.split（“”[1]；
变量内容=“”
+结果[1]。格式化的_地址.trim（）+'

+'日期：'+Date+'
'
+'时间：'+Time+'
'
+'准确度：'+acc+'m'
+ '';
infoWindow.setContent（content）；
信息窗口。打开（地图、标记）；
精度。设置映射（空）；
精度。设定图（map）；
精度.setCenter（marker.getPosition（））；
精度。设定半径（acc/1.6）；
}否则{
//警报（“未找到结果”）；
}
}否则{
警报（'地理编码器因：'+状态而失败）；
}
});
}
函数addMultiMarker（latLng、num、datetime、acc）{
//在提供的位置创建标记
var marker=new google.maps.marker({
位置：latLng，
地图：地图，
图标：图像_圈，
标题：“位置#”+num，
zIndex:num+1
});
//在标记上，单击“在地图内居中”并显示信息窗口
google.maps.event.addListener（标记'click'，函数（）{
map.panTo（marker.getPosition（））；
showInfoWindow（标记、日期时间、acc）；
});
返回标记；
}
函数showRoute（）{
var renderoptions={
可拖动：错误，
希德鲁特利斯特：没错，
对,，
infoWindow:infoWindow，
多段线选项：多段线选项，
地图：地图
};
directionsDisplay=新建google.maps.DirectionsRenderer（渲染器选项）；
var len=标记。长度；
var start=markers[0]。getPosition（）；
var end=markers[len-1].getPosition（）；
新的google.maps.event.trigger（标记[len-1]，'click'）；
var-wayPts=[]；
对于（变量i=1；i对于（var i=periodStart；i这项服务似乎有一个限制（8或23，我尝试了，它一直工作到39岁，然后40岁没有），除了多段线之外，没有其他方法可以做到这一点，但你不想要它，所以我认为没有可行的解决方案……
这项服务似乎有一个限制（8岁或23岁时，我试过了，直到39岁才奏效，但40岁却没有）除了多段线之外，没有其他方法可以解决这个问题，但你不想要它，所以我认为没有可行的解决方案…
因为没有人能够帮助我解决我的问题，所以我必须自己解决。我回答我自己的问题，因为这对很多人来说似乎是一个相当大的问题，在网络上的解释还不够充分，是吗o这可能会帮助有类似问题的开发人员

无论如何，让我们开门见山吧。由于谷歌的限制而引发的错误正如所建议的，错误是：


google.maps.DirectionsResult.MAX\u WAYPOINTS\u超过了
-这是因为我发送了一个包含起点、终点和终点的请求
// list of randomly generated locations (max 288)
var locations = [];
for(var i=0; i<288; i++){
    locations[i] = {
        datetime: '2014/10/01 12:10',
        location: (51 + Math.random()) +
        ' ' + (-0.5 + Math.random()) + ' 30.0'
    };
}
// Marker images
var image_pin = new google.maps.MarkerImage(
    'http://stedkomerc.com.mk/gpslocator/images/mPin.svg',  
    new google.maps.Size(25, 41),  // size
    new google.maps.Point(0, 0),   // origin, top-left corner
    new google.maps.Point(12, 40)  // anchor
);
var image_circle = new google.maps.MarkerImage(
    'http://stedkomerc.com.mk/gpslocator/images/mCircle.svg',
    new google.maps.Size(19, 19),  // size
    new google.maps.Point(0, 0),   // origin, top-left corner
    new google.maps.Point(9, 9)    // anchor
);
// Variables
var map;
var bounds = new google.maps.LatLngBounds();
var markers = [];
var pathPoints = [];
var geocoder;
var infoWindow = new google.maps.InfoWindow();
var accuracy = new google.maps.Circle({
    fillColor: '#ff4080',
    fillOpacity: 0.4,
    strokeOpacity: 0,
    zIndex: 0
});
var polyOptions = {
    geodesic: true,
    strokeColor: '#28b8b8',
    strokeOpacity: 1.0,
    strokeWeight: 8,
    zIndex: 1
};
var path = new google.maps.Polyline(polyOptions);
var directionsService = new google.maps.DirectionsService();
var directions = [];
var rendererOptions = {
    draggable: false,
    hideRouteList: true,
    suppressMarkers: true,
    preserveViewport: true,
    infoWindow: infoWindow,
    polylineOptions: polyOptions
};
var requests = [];
var MAX_POINTS_PER_REQUEST = 10; // 8*waypts Google limit + start + end
var MAX_REQUESTS_PER_SECOND = 10; // Google limit
// functions
function showInfoWindow(marker, datetime, acc){
    geocoder = new google.maps.Geocoder();
    geocoder.geocode({
        'latLng': marker.getPosition()
    }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            if (results[1]) {
                infoWindow.close();
                var date = datetime.split(" ")[0];
                var time = datetime.split(" ")[1];
                var content = '<div class="infowindow">' +
                    results[1].formatted_address.trim() + '<br />' +
                    'Date: ' + date + '<br />' +
                    'Time: ' + time + '<br />' +
                    'Accuracy: ' + acc + 'm' +
                    '</div>';
                infoWindow.setContent(content);
                infoWindow.open(map, marker);
                accuracy.setMap(null);
                accuracy.setMap(map);
                accuracy.setCenter(marker.getPosition());
                accuracy.setRadius(acc);
            }
        } else {
            console.log('Geocoder failed due to: ' + status);
        }
    });
}
function addMultiMarker(latLng, num, datetime, acc){
    // Create marker at provided location
    var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        icon: image_circle,
        title: 'Location #' + num,
        zIndex: num + 1
    });
    // On marker click center it inside map and show infoWindow
    google.maps.event.addListener(marker, 'click', function() {
        //map.panTo(marker.getPosition());
        showInfoWindow(marker, datetime, acc);
    });
    return marker;
}
function connectMarkersPolyline(mrkrs){
    path.setMap(map);
    pathPoints = path.getPath();
    len = mrkrs.length;
    for(var i = 0; i < len; i++){
        pathPoints.push(mrkrs[i].getPosition());
    }
}
function connectMarkersRoute(mrkrs, part, maxParts){
    var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
    directionsDisplay.setMap(map);
    var len = mrkrs.length;
    var start = mrkrs[0].getPosition();
    var end = mrkrs[len - 1].getPosition();
    var wayPts = [];
    for(var i = 1; i < len - 1; i++){
        wayPts.push({
            location: mrkrs[i].getPosition(),
            stopover: true
        });
    }
    var request = {
        origin: start,
        destination: end,
        waypoints: wayPts,
        optimizeWaypoints: false,
        travelMode: google.maps.TravelMode.DRIVING,
        unitSystem: google.maps.UnitSystem.METRIC
    };
    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            // request status OK, display route
            directionsDisplay.setDirections(response);
            // save it in array in case we want to remove it later
            directions.push(directionsDisplay);
            // if not last chunk, send next chunk after 100ms
            // 1 request per 100ms => 10 requests per 1s
            if(part+1 < maxParts)
                setTimeout(connectMarkersRoute(requests[part+1], part+1, maxParts), 100);
            else showLastMarker();
        } else if (status == google.maps.DirectionsStatus.OVER_QUERY_LIMIT) {
            // if we get error, send same request after bigger delay (120ms)
            setTimeout(connectMarkersRoute(requests[part], part, maxParts), 120);
        } else {
            // if all fails, connect with simple polyline
            console.log('Directions failed due to: ' + status);
            connectMarkersPolyline(mrkrs);
        }
    });
}
function connectMarkers(markers){
    path.setMap(null);
    path.setPath([]);
    directions = [];
    requests = [];
    var len = markers.length;
    console.log('connecting ' + len + ' markers');
    var i, j;
    // split markers array into chunks of 10 (start + waypts + end)
    for(i=0; i<len; i+=MAX_POINTS_PER_REQUEST-1){
        if(i<len-1)
            requests.push(markers.slice(i, i+MAX_POINTS_PER_REQUEST));
    }
    // send first chunk to connectMarkersRoute()
    connectMarkersRoute(requests[0], 0, requests.length);
}
function showMapPeriod(periodStart, periodEnd){
    // Map options
    var mapOptions = {
        zoom: 16,
        center: new google.maps.LatLng(41.995922, 21.431465),
        mapTypeId : google.maps.MapTypeId.ROADMAP,
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
            position: google.maps.ControlPosition.TOP_RIGHT
        },
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.LARGE,
            position: google.maps.ControlPosition.LEFT_CENTER
        },
        panControl: false,
        streetViewControl: false
    };
    $("#map").html("");
    //openMapContainer();
    // Create and show map
    map = new google.maps.Map(document.getElementById('map'), mapOptions);
    // Create and display markers
    bounds = new google.maps.LatLngBounds();
    markers = [];
    var len = 0;
    for(var i = periodStart; i <= periodEnd; i++, len++){
        var loc_vals = locations[i].location.trim().split(" ");
        var lat = parseFloat(loc_vals[0]);
        var lng = parseFloat(loc_vals[1]);
        var acc = parseFloat(loc_vals[2]);
        // Create marker at provided location
        var datetime = locations[i].datetime;
        var latLng = new google.maps.LatLng(lat, lng);
        markers[len] = addMultiMarker(latLng, len+1, datetime, acc);
        bounds.extend(latLng);
    }
    connectMarkers(markers);
    map.fitBounds(bounds);
    if(map.getZoom() > 16) map.setZoom(16);  
}
function showLastMarker(){
    new google.maps.event.trigger(markers[markers.length - 1], 'click');  
}
// show map
showMapPeriod(1, 280);
// --------