drawingManager.put을 이용해서 그림그리기

지도/로컬 API
#1

예제중 'Drawing Library에서 데이터 얻기’를 실행시켜보면 아래와 같이 위에 그려진 도형을 그대로 복사하기는 하는데, 삭제 버튼이나, 마우스로 선택시에 나타나는 작은 네모박스 4개 같은 것은 나타나지 않네요.(mouse event등록해도 동일)

다른 사용자들의 글을 읽어보니 DrawingManager.put을 사용하면 된다고 적혀있어 시도해 보았지만 put하는 과정에 에러가 발생하네요.
바른 사용법을 알려주시면 감사하겠습니다.

GettingDrawingData

#2

http://apis.map.kakao.com/web/sample/basicDrawingLibrary/ 예제에서
http://apis.map.kakao.com/web/documentation/#drawing_DrawingManager_put 코드 부분을 붙이면
도형이 그려지고 이동, 삭제가 가능합니다.

put할 때 어떤 오류가 나는지 같이 첨부해주세요

#3

  1. Chrome DevTools에서 보이는 에러는 아래와 같습니다.
    kakao.js:141 Uncaught TypeError: this.k.ha is not a function
    at ExtendsCircle.c.v (kakao.js:141)
    at ExtendsCircle.c.X (kakao.js:141)
    at ExtendsCircle.c.A (kakao.js:129)
    at ExtendsCircle.U [as constructor] (kakao.js:29)
    at new ExtendsCircle (drawing.js:82)
    at CircleController.put (drawing.js:158)
    at DrawingManager.put (drawing.js:219)
    at drawCircle (map-1.htm:264)
    at getDataFromDrawingMap (map-1.htm:185)
    at HTMLButtonElement.onclick (map-1.htm:26)

  2. ‘Drawing Library에서 데어터 얻기’ 샘플코드에 제가 추가한 내용은 아래와 같습니다.

2.1) 변경한 내용 (map ==> copiedMap)
var copiedMap = new kakao.maps.Map(mapContainer, mapOptions),
overlays = []; // 지도에 그려진 도형을 담을 배열

2.2) 추가한 내용
var mgrOpt = { // Drawing Manager를 생성할 때 사용할 옵션입니다
map: copiedMap, // Drawing Manager로 그리기 요소를 그릴 map 객체입니다
drawingMode: [ // Drawing Manager로 제공할 그리기 요소 모드입니다
kakao.maps.drawing.OverlayType.MARKER,
kakao.maps.drawing.OverlayType.POLYLINE,
kakao.maps.drawing.OverlayType.RECTANGLE,
kakao.maps.drawing.OverlayType.CIRCLE,
kakao.maps.drawing.OverlayType.POLYGON
],
// 사용자에게 제공할 그리기 가이드 툴팁입니다
// 사용자에게 도형을 그릴때, 드래그할때, 수정할때 가이드 툴팁을 표시하도록 설정합니다
guideTooltip: [‘draw’, ‘drag’, ‘edit’],
markerOptions: { // 마커 옵션입니다
draggable: true, // 마커를 그리고 나서 드래그 가능하게 합니다
removable: true // 마커를 삭제 할 수 있도록 x 버튼이 표시됩니다
},
polylineOptions: { // 선 옵션입니다
draggable: true, // 그린 후 드래그가 가능하도록 설정합니다
removable: true, // 그린 후 삭제 할 수 있도록 x 버튼이 표시됩니다
editable: true, // 그린 후 수정할 수 있도록 설정합니다
strokeColor: ‘#39f’, // 선 색
hintStrokeStyle: ‘dash’, // 그리중 마우스를 따라다니는 보조선의 선 스타일
hintStrokeOpacity: 0.5 // 그리중 마우스를 따라다니는 보조선의 투명도
},
rectangleOptions: {
draggable: true,
removable: true,
editable: true,
strokeColor: ‘#39f’, // 외곽선 색
fillColor: ‘#39f’, // 채우기 색
fillOpacity: 0.5 // 채우기색 투명도
},
circleOptions: {
draggable: true,
removable: true,
editable: true,
strokeColor: ‘#39f’,
fillColor: ‘#39f’,
fillOpacity: 0.5
},
polygonOptions: {
draggable: true,
removable: true,
editable: true,
strokeColor: ‘#39f’,
fillColor: ‘#39f’,
fillOpacity: 0.5,
hintStrokeStyle: ‘dash’,
hintStrokeOpacity: 0.5
}
};

var mgr = new kakao.maps.drawing.DrawingManager(mgrOpt);

2.3) 변경한 내용.
function drawCircle(circles) {
var len = circles.length, i = 0;

for (; i < len; i++) {
    mgr.put(kakao.maps.drawing.OverlayType.CIRCLE, circles[i].center, circles[i].radius)
}

}

제가 DrawingManager 두 개를 정의해서 사용하면서 문제를 일으켰을 수도 있겠네요. 하나만 정의해서 사용해 봐야 겠습니다.