Drawing tool box (툴박스 그리기 도구) 삭제

카카오맵 API (지도/로컬)
1

[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.

안녕하세요. 코딩을 하나도 모르는데 개인 웹사이트 제작을 위해 챗GPT와 함께 코딩을 하고 있습니다.
현재 툴박스 기능에서 도형을 그리면 X 표시가 나와서 미관상 보기가 안좋아, removable 기능을 삭제하였습니다. 현재 아래 코딩을 구현시키면 오른쪽 상단에 “초기화” 버튼이 있으며, 이 초기화 버튼을 눌렸을 때 툴박스에서 그린 모든 도형이 삭제되는 코딩을 구현하고 싶은데 어떻게 하면 될까요? 코딩 전문가님 좀 도와주세요… ㅠㅠ

var strokeColor = ‘#39f’,
arrowstrokecolor = ‘#FF0000’
fillColor = ‘#cce6ff’,
fillOpacity = 0.5,
hintarrowStrokeStyle = ‘solid’;
hintStrokeStyle = ‘dash’;

var options = { // Drawing Manager를 생성할 때 사용할 옵션입니다
map: map, // Drawing Manager로 그리기 요소를 그릴 map 객체입니다
drawingMode: [
kakao.maps.Drawing.OverlayType.MARKER,
kakao.maps.Drawing.OverlayType.ARROW,
kakao.maps.Drawing.OverlayType.POLYLINE,
kakao.maps.Drawing.OverlayType.RECTANGLE,
kakao.maps.Drawing.OverlayType.CIRCLE,
kakao.maps.Drawing.OverlayType.ELLIPSE,
kakao.maps.Drawing.OverlayType.POLYGON
],
// 사용자에게 제공할 그리기 가이드 툴팁입니다
// 사용자에게 도형을 그릴때, 드래그할때, 수정할때 가이드 툴팁을 표시하도록 설정합니다
guideTooltip: [‘draw’, ‘drag’, ‘edit’],
markerOptions: {
draggable: true,
//removable: true//

},
arrowOptions: {
    draggable: true,
    //removable: true,//
    strokeColor: arrowstrokecolor,
    hintStrokeStyle: hintarrowStrokeStyle,
    strokeWeight : 4
},
polylineOptions: {
    draggable: true,
    //removable: true,
    strokeColor: strokeColor,
    hintStrokeStyle: hintStrokeStyle
},
rectangleOptions: {
    draggable: true,
   // removable: true,
    strokeColor: strokeColor,
    fillColor: fillColor,
    fillOpacity: fillOpacity
},
circleOptions: {
    draggable: true,
   // removable: true,
    strokeColor: strokeColor,
    fillColor: fillColor,
    fillOpacity: fillOpacity
},
ellipseOptions: {
    draggable: true,
   // removable: true,
    strokeColor: strokeColor,
    fillColor: fillColor,
    fillOpacity: fillOpacity
},
polygonOptions: {
    draggable: true,
    // removable: true,
    strokeColor: strokeColor,
    fillColor: fillColor,
    fillOpacity: fillOpacity
}

};

// 위에 작성한 옵션으로 Drawing Manager를 생성합니다
var manager = new kakao.maps.Drawing.DrawingManager(options);

// Toolbox를 생성합니다.
// Toolbox 생성 시 위에서 생성한 DrawingManager 객체를 설정합니다.
// DrawingManager 객체를 꼭 설정해야만 그리기 모드와 매니저의 상태를 툴박스에 설정할 수 있습니다.
var toolbox = new kakao.maps.Drawing.Toolbox({drawingManager: manager});

// 지도 위에 Toolbox를 표시합니다
// kakao.maps.ControlPosition은 컨트롤이 표시될 위치를 정의하는데 TOP은 위 가운데를 의미합니다.
map.addControl(toolbox.getElement(), kakao.maps.ControlPosition.TOP);

///// 초기화 기능 /////////

document.getElementById(‘btn-reset’).onclick = function () {

// 툴박스 도형 제거
manager.addListener('drawend', function(data) {
// data.target 에 그려진 오버레이 객체가 넘어온다.
manager.remove(data.target);

});
}

2

챗 GPT는, 초기화 버튼 함수에서 아래와 같이 입력하라고 하는데 … 작동을 안하네요. ㅠ

const types = [
kakao.maps.drawing.OverlayType.MARKER,
kakao.maps.drawing.OverlayType.ARROW,
kakao.maps.drawing.OverlayType.POLYLINE,
kakao.maps.drawing.OverlayType.RECTANGLE,
kakao.maps.drawing.OverlayType.CIRCLE,
kakao.maps.drawing.OverlayType.ELLIPSE,
kakao.maps.drawing.OverlayType.POLYGON
];

types.forEach(type => {
const key = type.toLowerCase();
const overlays = manager.getOverlays([type])[key];
overlays?.forEach(o => manager.remove(o));
});

3

아래 두가지 방법으로 오버레이를 삭제할 수 있습니다.
참고로만 봐주시고 구현 코드에 맞게 적용해주세요.

방법1. drawend 이벤트를 통해 그려진 도형을 저장한 후 초기화 버튼으로 저장된 도형을 제거하는 방법

let drawData = [];
manager.addListener('drawend', function(data) {
    drawData.push(data.target); //그리기가 끝난 도형을 배열에 저장
})

//초기화 버튼으로 저장된 도형 삭제
document.getElementById('btn-reset').onclick = function () {
    drawData.forEach(function(data) {
        manager.remove(data);
    });

    drawData = [];
}

방법2. drawingMode에서 사용중인 오버레이 정보를 가져와서 삭제하는 방법

function removeAll() {
    for(let i = 0; i < options.drawingMode.length; i++) { 
        // [marker, arrow, polygon,...]타입의 오버레이 가져오기
        const overlays = manager.getOverlays()[options.drawingMode[i]];

        for(let j = 0; j < overlays.length; j++) { //j번째 오버레이 삭제
            manager.remove(overlays[j]);
        }
    }
}

document.getElementById('btn-reset').onclick = function () {
    removeAll();
}
4

Visual basic 코딩.txt (27.7 KB)

선생님, 방법2가 깔끔한 것 같아서 해봤는데, 이리저리 해봐도 도저히 안됩니다… ㅠㅠㅠ 대체 뭐가 문제인가요 … 저에게 현답을 내려주세요… ㅠㅠㅠ