Question

我有一个谷歌地图，我可以绘制多边形。它一直运行良好，现在突然我最终得到错误Uncaught RangeError：最大调用堆栈大小超过main.js.27。下面是我初始化函数的一部分，我在加载map时调用它。现在我完成绘制polyon时出现这个错误。

    function clearSelection() {
        for (var n = 0; n<shapes.length; n++) {
            var shapesOne = shapes[n];
            shapesOne.setMap(null);
        }
    }

    function setSelection(shape) {
        selectedShape = shape;
        shape.setEditable(true);
        selectColor(shape.get('fillColor') || shape.get('strokeColor'));
    }

    function deleteSelectedShape() {
        if (selectedShape) {
            selectedShape.setMap(null);
        }
    }

    function selectColor(color) {
        selectedColor = color;
        var polylineOptions = drawingManager.get('polylineOptions');
        polylineOptions.strokeColor = color;
        drawingManager.set('polylineOptions', polylineOptions);

        var rectangleOptions = drawingManager.get('rectangleOptions');
        rectangleOptions.fillColor = color;
        drawingManager.set('rectangleOptions', rectangleOptions);

        var circleOptions = drawingManager.get('circleOptions');
        circleOptions.fillColor = color;
        drawingManager.set('circleOptions', circleOptions);

        var polygonOptions = drawingManager.get('polygonOptions');
        polygonOptions.fillColor = color;
        drawingManager.set('polygonOptions', polygonOptions);
    }

    function setSelectedShapeColor(color) {
        if (selectedShape) {
            if (selectedShape.type == google.maps.drawing.OverlayType.POLYLINE) {
                selectedShape.set('strokeColor', color);
            } else {
                selectedShape.set('fillColor', color);
            }
        }
     }

     function makeColorButton(color) {
         var button = document.createElement('span');
         button.className = 'color-button';
         button.style.backgroundColor = color;
         google.maps.event.addDomListener(button, 'click', function(){
              selectColor(color);
              setSelectedShapeColor(color);
         });

         return button;
     }

     function buildColorPalette() {
         selectColor("#1E90FF");
     }

     function initialize() {
         geocoder = new google.maps.Geocoder();
         map = new google.maps.Map(document.getElementById('map'), {
             zoom: 7,
             center: new google.maps.LatLng(3.8, 102.5),
             mapTypeId: google.maps.MapTypeId.ROADMAP,
             mapTypeControl: true,
                 mapTypeControlOptions: {
                      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
                      position: google.maps.ControlPosition.TOP_RIGHT
                    },
             disableDefaultUI: true,
             zoomControl: true
         });


         var contents = document.createElement("div");
         contents.style.width="300px";
         contents.style.height="10px";
         contents.innerHTML="<form name='form2' id='form2' onsubmit='javascript:codeAddress();return false;'><div id='auto' style='z-index:5; position:relative'><input type='text' style='font-family:verdana;width:200px; height:15px;font-size:10px' id='address' name='address' autocomplete='on'  /><input type=\"button\" onclick=\"codeAddress()\" value=\"Search\"/><\/div></form>";


    document.getElementById('map').appendChild(contents);
    document.getElementById("auto").style.top="35px";
    document.getElementById("auto").style.left="35px";
    var polyOptions = {
        strokeWeight: 0,
        fillOpacity: 0.45,
        editable: true
    };

    drawingManager = new google.maps.drawing.DrawingManager({
        drawingMode: google.maps.drawing.OverlayType.POLYGON,
        markerOptions: {
            draggable: true
        },
        drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_LEFT,
                drawingModes: [
                    google.maps.drawing.OverlayType.MARKER,
                    google.maps.drawing.OverlayType.POLYLINE,
                    google.maps.drawing.OverlayType.POLYGON
                ]
        },
        polylineOptions: {
            editable: true
        },
        rectangleOptions: polyOptions,
        circleOptions: polyOptions,
        polygonOptions: polyOptions,
        map: map
    });

   google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
        drawingManager.setDrawingMode(null);
       if(e.type.toString()=="polygon"){
           var points = e.overlay.getPath();
           geoFenceString = "POLYGON((";
           var latlngbounds = new google.maps.LatLngBounds();
           for (var i =0; i < points.length; i++) {
               var xy = points.getAt(i);
               latlngbounds.extend(xy); 
               geoFenceString = geoFenceString+xy.lng()+" "+xy.lat()+",";                         
           }
           geoFenceString = geoFenceString+points.getAt(0).lng()+" "+points.getAt(0).lat();     
           geoFenceString = geoFenceString+"))";
           var htmlString = '<table idth="100%">\r\n';
           htmlString += '<tr><td>Name</td><td valign="top"><input id="geoFenceName" type="text" style="width:100%" value=""></td></tr>\r\n';
            htmlString += '</tr>\r\n';
            htmlString += '</table>\r\n';
            var infowindow = new google.maps.InfoWindow({
            });

     }
     });
         google.maps.event.addListener(drawingManager, 'drawingmode_changed', clearSelection);

                buildColorPalette();        

        }

        google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

其他人发布了类似的问题，他们建议：

if (drawManager.getDrawingMode()) {
  drawManager.setDrawingMode(null);
}

请参阅this question以获取完整的解释。

Google地图Uncaught RangeError：最大调用堆栈大小超出main.js.27

1 个答案: