Question

我已经创建了一个地图，我可以用不同颜色绘制线条，工作得很好，但是当我试图删除我的绘图时，它不能很好地工作。我将所有的DrawingManager插入到一个数组中，并从那里尝试删除它们。有人可以帮我吗？

查看整个项目

$(document).ready(function(){

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

    var gMap;
    var drawingMap = [];
    var colorIndex = 0;

    function initGMap() {
        var mapOptions = {
            center: new google.maps.LatLng(63.354122, 16.007140),
            zoom: 6,
            mapTypeId: google.maps.MapTypeId.TERRAIN,
            disableDefaultUI: true
        };
        gMap = new google.maps.Map(document.getElementById('googleMaps'), mapOptions);    
    }

    $.selMapBtn = function (btnObj) {
        $(".mapBtn").removeClass('mapBtnSelected');
        if ($(btnObj).hasClass('reMap')) {
            // Remove last action...
            if(drawingMap.length > 0) {
                drawingMap[drawingMap.length-1].setMap(null);
            }
        }
        if ($(btnObj).hasClass('clMap')) {
            // Remove all actions...
            for(i in drawingMap) {
                drawingMap[i].setMap(null);
            }
        }
        if ($(btnObj).hasClass('mapPen')) {
            $(btnObj).addClass('mapBtnSelected');
            penColor = $(btnObj).data('color');
            i = drawingMap.length;
            drawingMap[i] = new google.maps.drawing.DrawingManager({
                drawingMode: google.maps.drawing.OverlayType.POLYLINE,
                drawingControl: false,
                polylineOptions: {
                    strokeColor: penColor,
                    strokeWeight: 5,
                    clickable: false,
                    editable: false,
                    zIndex: 1
                }
            });
            drawingMap[i].setMap(gMap);
        }
    };

    $(".mapBtn").click(function () {
        $.selMapBtn($(this));
        return false;
    });

});

Answer 1

基本上你根本不需要多个DrawingManager实例，可以动态设置DrawingManager的选项（例如代码中的PolylineOptions）。

要访问DrawingManager创建的形状，您必须将它们存储在某个位置（例如，在数组中）。观察DrawingManager的overlaycomplete - 事件，即可以访问新创建的形状。

$(document).ready(function () {

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

    var gMap,
    drawings = [],
        drawingMan,
        colorIndex = 0;

    function initGMap() {
        var mapOptions = {
            center: new google.maps.LatLng(63.354122, 16.007140),
            zoom: 6,
            mapTypeId: google.maps.MapTypeId.TERRAIN,
            disableDefaultUI: true
        };
        gMap = new google.maps.Map(document.getElementById('googleMaps'), 
                                    mapOptions);
        drawingMan = new google.maps.drawing.DrawingManager({

            drawingControl: false
        });
        google.maps.event.addListener(drawingMan, 'overlaycomplete', 
         function (shape) {
            //push shape onto the array
            drawings.push(shape.overlay);
        });

    }

    $.selMapBtn = function (btnObj) {
        $(".mapBtn").removeClass('mapBtnSelected');
        if ($(btnObj).hasClass('reMap')) {

            drawingMan.setDrawingMode(null);


            if (drawings.length) {
                //remove last shape
                drawings.pop().setMap(null);
            }
        }
        if ($(btnObj).hasClass('clMap')) {
            drawingMan.setDrawingMode(null);

              //remove all shapes
              while (drawings.length) {
                drawings.pop().setMap(null);
            }
        }
        if ($(btnObj).hasClass('mapPen')) {
            $(btnObj).addClass('mapBtnSelected');
            penColor = $(btnObj).data('color');

            drawingMan.setOptions({
                polylineOptions: {
                    strokeColor: penColor,
                    strokeWeight: 5,
                    clickable: false,
                    editable: false,
                    zIndex: 1
                },
                map: gMap,
                drawingMode: google.maps.drawing.OverlayType.POLYLINE
            });

        }
    };

    $(".mapBtn").click(function () {
        $.selMapBtn($(this));
        return false;
    });

});

http://jsfiddle.net/jv8wp4p0/3/

从Google地图中删除DrawingManager

1 个答案: