[vue.js] kakaomap 연동하기

npm 패키지에는 kakaomap 쓸만한 것도, 인기있는 것도 생각보다 없다.

기존에 카카오맵 가이드를 보면 api key 부분을 헤더나, 스크립트에 넣어서 코드가 실행되기 전에 먼저 실행을 시켜주어야 한다.

아래 코드는 맵 불러오는 코드가 불러오기 전에 api키를 html 헤더에 넣고, 맵을 불러오게 한다.

입력해야하는 api키는 https://developers.kakao.com/접속 후 어플리케이션 하나 생성하면 메인화면에 아래와 같은 정보가 뜨는데

앱정보를 누르면 각종 api키를 확인할 수 있다. 여기서 자바스크립트 키를 입력하면 된다.

 

<template>
  <div id="map"></div>
</template>

<script>

export default {
  
  mounted() {
 	window.kakao && window.kakao.maps ? this.initMap() : this.addScript();  
  },

  methods : {

    initMap() {
       var container = document.getElementById('map');
       var options = {
         center: new kakao.maps.LatLng(33.450701, 126.570667),
         level: 3
       };
       var map = new kakao.maps.Map(container, options);
       
       //마커추가하려면 객체를 아래와 같이 하나 만든다.
       var marker = new kakao.maps.Marker({
         position: map.getCenter()
       });
       marker.setMap(map);
    },
    
    addScript() {
      const script = document.createElement('script');
        /* global kakao */
        script.onload = () => kakao.maps.load(this.initMap);
        script.src = 'http://dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=API키를 입력해주세요';
        document.head.appendChild(script);
    }
  }
}

</script>

<style scoped lang="scss">
@import "@/assets/stylesheets/index.scss";

    #map {
      @include css-size(300px, 300px);      
    }
</style>

initMap과 addScript에 콘솔을 찍어보면 addScript -> initMap 순으로 찍힘을 알 수 있다.

Vue 타입스크립트 kakaomap에 대한 정보들이 매우 없어서, 조만간 하나작성해서 올려야겠다.