Vue로 kakao map API 사용하기

 

회사에서 좋은기회가 생겨 vue로 카카오맵 api 를 사용하게 되었다.
지도는 프론트엔드에게 꽃이나 다름없다고 하셨는데 ㅋㅋㅋ 맞는말인지 모르겠지만
어쨌든 1년차도 안된 내게는 좋은기회라고 생각했다

 

 

카카오 주소

https://apis.map.kakao.com/
https://apis.map.kakao.com/web/sample/

밑에 주소는 샘플링 주소이다. 개발을 하면서 정말 많이 들어갔던.. 물론 문서도 중요하지만 샘플링을 통해 어떤식으로 구현되는지 한번 확인을 거친 뒤 문서를 읽으면 확실히 금방 습득이 가능했다.

 

 

 

vue에 카카오맵 설치 및 확인

여러 시도를 거쳐봤는데 key값이 노출되지 않은 채로 전역으로 설치해주는것은 불가능해 보였다.

(만약 찾으신분이 있다면 알려주시길..👀 )

그래서 지도를 사용할 레이아웃 컴포넌트가 생성될 때 mounted() 안에 넣어주는걸로 선택했다.

카카오 맵이 제대로 script에 등록되었는지는 
if(window.kakao && window.kakao.maps)
 로 확인이 가능하다

 

 

index.vue

mounted(){

     const script = document.createElement('script');

      /* global kakao */
      script.onload = () => kakao.maps.load(this.initMap);

      script.src = process.env.VUE_APP_KAKAO_URL;

      document.head.appendChild(script);
      
}

 

 

* 주의할 점*

해당소스는 카카오사에서 vue에서 사용하고 싶은경우 가이드로 적어준 소스인데
/* global kakao */ 이부분을 넣어주지 않으면 작동되지 않는다 (아마 크롤링하는듯)

 

 

     this.container = document.getElementById('map');

     const options = {
        center: new kakao.maps.LatLng(37.488127, 127.011594),
        level: 1,
      };
      
      this.map = new kakao.maps.Map(this.container, options);

컨테이너를 map 이라는 아이디값을 가진 요소에 넣어주고 옵션과 함께 카카오 맵을 세팅해줍니다

 

 

drawing 드로잉 사용하기

카카오에서는 드로잉 기능도 사용가능하다.
해당 url을 스크립트 src 값에 넣어주면 된다.
추가적으로 사용할 수 있는 services,clusterer 도 =drawing과 같이 ,를 사용해 추가해주면 된다!

"//dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=''=drawing"

기본적으로 mounted 안에 카카오와 관련된 대부분의 초기값을 모두 넣어주어야 활용도가 높고, 특히 map 이나 좌표계 등등은 다른 메소드에서도 주기적으로 사용되어야 하기때문에 data안에 넣어주고 사용하는것이 효율적이다..!

 

 //그리기 옵션 설정
      let drowOptions = {
      
        //어디 지도위에 뿌려줄 것인지
        map: this.map,
        
        //사용하고싶은 드로잉모드
        drawingMode: [
          kakao.maps.drawing.OverlayType.CIRCLE,
          kakao.maps.drawing.OverlayType.POLYGON,
        ],
        
        guideTooltip: ['draw'],
        
        //드로잉 도구 옵션
        markerOptions: {
          draggable: true,
          removable: true,
        },
        
        //원형 옵션
        circleOptions: {
          strokeColor: '#379457',
          strokeOpacity: 0.1,
          fillColor: '#379457',
          fillOpacity: 0.2,
        },
        
        //다각형도구 옵션
        polygonOptions: {
          strokeColor: '#379457',
          fillColor: '#379457',
          fillOpacity: 0.2,
          hintStrokeStyle: 'dash',
          hintStrokeOpacity: 0.5,
        },
      };
      
      //드로잉도구들의 세팅값을 담는다 (지우는것도 remove로 가능하다)
      this.manager = new kakao.maps.drawing.DrawingManager(drowOptions); 
      
      // 대부분의 도형들은 이런식으로 초기값을 설정해주는것이 좋다.
      this.polygon = new kakao.maps.Polygon({
        map: this.map,
        path: this.polygonPath, 
        strokeWeight: 2,
        strokeColor: '#29ada1',
        strokeOpacity: 0.8,
      });

 

 

드로잉 기능을 사용하기 위해 manager라는 속성을 사용하는데 vue에서는 this안에 넣어주는것이 매우 효율적으로 드로잉소스들을 관리할 수 있다.😗