카카오맵 vuejs 툴박스 사용하기(npm vue-daum-map)

지도/로컬 API
#1

안녕하세요.
vuejs를 사용중인데 leaflet을 사용하다가 leaflet-draw에서 버전이슈가 생겨 대안방법을 찾는 중에 카카오맵을 발견했습니다.
문제는 vuejs를 사용하기 때문에 공식 개발문서에 사용되고 있는 문법대로 쓸 수가 없다는 점이 있네요.

npm으로 패키지 관리를 해야해서 vue-daum-map을 설치하고 랩퍼로 지도까지 불러오는데는 성공했습니다만, 가장 중요한 툴박스 기능을 대체 어떻게 구현해야할지 감조차 잡히지 않습니다. 혹시 vuejs vue-daum-map에 기본 툴박스 틀이라도 넣어서 표출한 예제를 구할 수 있을까요? 기본 시작 예제만 있으면 응용은 혼자 시도해볼 예정입니다.

#2

우선 툴박스, 그러니까 DrawingManager에서 제공하는 기능이 leaflet을 확실히 대체할 수 있는지 먼저 검토해 보세요.
일부 기능들을 대체할 수 없어서 기능 요청을 해 주셔도 저희가 대응하는데는 많은 시간이 걸리므로 문제가 될 수 있습니다.

일단 마이그레이션을 한다는 가정하에 질문 답변을 드리면

위의 답변과 같이 onLoad 에서 직접 카카오 지도 네임스페이스에 접근하여 객체를 생성해주시면 됩니다.

onLoad (map) {
    this.map = map;

    // kakao.maps 네임스페이스로 바로 접근
    var manager = new kakao.maps.Drawing.DrawingManager(options);
    var toolbox = new kakao.maps.Drawing.Toolbox({drawingManager: manager});
    map.addControl(toolbox.getElement(), kakao.maps.ControlPosition.TOP);
}

주의하실 점은 카카오 지도 SDK는 애초에 프레임워크에서의 사용을 고려하지 않고
standalone으로 동작하도록 설계되었기 때문에
Toolbox에서 생성/삭제된 데이터들과 Vue 와의 data binding 같은 경우는 직접 관리를 해 주셔야 합니다.

#3

답변 감사드립니다! 테스트 진행하도록할께요~