Vue.js 에서 다음맵 마커 추가법을 모르겠습니다

다음지도를 홈페이지에 써보려고 하는 개발자입니다.
현재 저의 개발 환경은 Vue.js 이며 npm에 있는 vue-daum-map 을 통하여
다음맵을 이미 구현해 놓는데 까지는 해놨습니다.
하지만 마커를 추가하는 데에 애를 먹고있는데요
우선 다음지도 api에 따라 바로 스크립트를 불러오는 방식 자체가 웹팩 기반의 vue에서 구현이 조금 무리가 있어
컴포넌트화 되어있는 방식으로 사용 중인데
조금 막막합니다. vue에 맞는 설명 페이지가 따로 있거나 혹은 준비 중인지 궁금하네요…
그리고 제가 어느 부분을 몰라 못 하고 있는건지 조차 구분이 가질 않아 설명이 조금 부족해졌습니다.
더 필요한 부분이 있다면 말씀 부탁드립니다. 감사합니다.

1개의 좋아요

vue-daum-map이 어떤 구성으로 되어있는지는 모르겠으나
global 객체에 namespace로 설정된 daum.maps를 접근하여 지도 객체들을 생성하는 것은 변하지 않습니다.
eg. var marker = new daum.maps.Marker(options);

지도 객체를 제어하는 컴포넌트에서 적절한 라이프 사이클 hook을 골라 그 곳에서 state 값에 따라 마커를 생성/삭제 하시면 됩니다.

특별히 vue 컴포넌트 안에서 스크립트를 동적으로 로딩하지 않고
그냥 가장 상위 html에 script src로 추가 하여
미리 글로벌 객체에 지도 라이브러리를 할당해 놓은 다음,

let daummaps = window.daum.maps;
let marker = new daummaps.Marker();

이렇게 사용하는 것도 하나의 방법입니다.

전역으로 사용하기엔 한 컴포넌트에서만 사용해서 리소스 낭비라고 생각해서 짜다보니 너무 돌아간 것 같습니다.
전역으로 한번 시도해 봐야겠네요… 감사합니다.

1개의 좋아요

혹시 동적으로 스크립트 로딩이 가능한 상황이시라면, 그리고 작성하신 프로젝트에서 지도 코드때문에 예외를 두기 싫으신 경우라면 아래의 답글도 한 번 참고해보세요.