Vue.js - Kakao Map API

• 'load-script-once' 라이브러리 사용

<template>
  <div ref="kakao_map"></div>
</template>

<script>
import loadScriptOnce from 'load-script-once'  // Kakao API 라이브러리 접근하기 위한 라이브러리
import { onMounted, ref } from '@vue/runtime-core'

export default {
  name: 'App',
  setup() {
    let map_data = ref({
      appKey: "API 키 값",  // API 키 값
      map: null,
      lat: 33.450701, // 위도
      lng: 126.570667,  // 경도
      level: 4  // 맵 레벨
    });
    let kakao_map = ref(null);

    // 카카오 API 설정 함수 + 카카오 맵 생성
    const set_kakao_api = () => {
      // 카카오 맵 API 불러오기
      loadScriptOnce(`//dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=${map_data.value.appKey}`)
        .then(() => {
          kakao.maps.load(() => {
            // 카카오 맵 API 로드가 되었으면
            set_kakao_map();
          });
        })
        .catch(err => {
          console.error(err);
        });
    }

    // 카카오 맵 생성 함수
    const set_kakao_map = () => {
      console.log("카카오 맵 생성");
      const options = { //지도를 생성할 때 필요한 기본 옵션
        center: new kakao.maps.LatLng(map_data.value.lat, map_data.value.lng),  //지도의 중심 좌표.
        level: map_data.value.level, //지도의 레벨 (확대, 축소 정도)
      };
      map_data.value.map = new kakao.maps.Map(kakao_map.value, options);  // 지도 생성 및 객체 리턴
    }

    onMounted(() => {
      // Mount(DOM 접근가능)가 진행된 이후
      set_kakao_api();
    });

    return {
      kakao_map, // DOM ref 때문에 꼭 있어야함
      map_data,
      set_kakao_api,
      set_kakao_map
    }
  }
}
</script>

<style>
#app>div {
  width: 100%;
  height: 80vh;
}
</style>

 

 

• 'load-script-once' 라이브러리 미 사용 (반복문 사용할 경우 동일한 script가 존재)

<template>
  <div ref="kakao_map"></div>
</template>

<script>
import { onMounted, ref } from '@vue/runtime-core'

export default {
  name: 'App',
  setup() {
    let map_data = ref({
      appKey: "API 키 값",  // API 키 값
      map: null,
      lat: 33.450701, // 위도
      lng: 126.570667,  // 경도
      level: 4  // 맵 레벨
    });
    let kakao_map = ref(null);

    // 카카오 API 설정 함수 + 카카오 맵 생성
    const set_kakao_api = () => {
      // 카카오 맵 API 불러오기
      if (window.kakao && window.kakao.maps) {
        set_kakao_map();
      } else {
        const script = document.createElement('script');
        script.onload = () => kakao.maps.load(set_kakao_map);
        script.src = `//dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=${map_data.value.appKey}`;
        document.head.appendChild(script);
    }

    // 카카오 맵 생성 함수
    const set_kakao_map = () => {
      console.log("카카오 맵 생성");
      const options = { //지도를 생성할 때 필요한 기본 옵션
        center: new kakao.maps.LatLng(map_data.value.lat, map_data.value.lng),  //지도의 중심 좌표.
        level: map_data.value.level, //지도의 레벨 (확대, 축소 정도)
      };
      map_data.value.map = new kakao.maps.Map(kakao_map.value, options);  // 지도 생성 및 객체 리턴
    }

    onMounted(() => {
      // Mount(DOM 접근가능)가 진행된 이후
      set_kakao_api();
    });

    return {
      kakao_map, // DOM ref 때문에 꼭 있어야함
      map_data,
      set_kakao_api,
      set_kakao_map
    }
  }
}
</script>

<style>
#app>div {
  width: 100%;
  height: 80vh;
}
</style>

 

 

• Composition API 사용 안함 (개인적으로 이게 더 깔끔해 보임)

<template>
  <div ref="kakao_map"></div>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    map_data: {
      appKey: "API 키 값",  // API 키 값
      map: null,
      lat: 33.450701, // 위도
      lng: 126.570667,  // 경도
      level: 4  // 맵 레벨
    }
  }),
  mounted () {
    this.set_kakao_api();
  },
  methods: {
    // 카카오 API 설정 함수 + 카카오 맵 생성
    set_kakao_api() {
      if (window.kakao && window.kakao.maps) {
        this.set_kakao_map();
      } else {
        const script = document.createElement('script');
        script.onload = () => kakao.maps.load(this.set_kakao_map);
        script.src = `http://dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=${this.map_data.appKey}`;
        document.head.appendChild(script);
      }
    },
    // 카카오 맵 생성 함수
    set_kakao_map() {
      const options = { //지도를 생성할 때 필요한 기본 옵션
        center: new kakao.maps.LatLng(this.map_data.lat, this.map_data.lng),  //지도의 중심 좌표.
        level: this.map_data.level, //지도의 레벨 (확대, 축소 정도)
      };
      this.map_data.map = new kakao.maps.Map(this.$refs.kakao_map, options);  // 지도 생성 및 객체 리턴
    }
  }
}
</script>

<style>
#app>div {
  width: 100%;
  height: 80vh;
}
</style>

 

 

• package.json 설정 (설정안하면 에러 뜸, 에러 무시하기 위한 설정)

{
    ...
    "globals": {
      "kakao": false
    },
    "rules": {
      "no-unused-vars": "off"
    }
    ...
}​

 

참고 링크 1: https://apis.map.kakao.com/

참고 링크 2: https://github.com/okchangwon/vue-daum-map

GitHub - okchangwon/vue-daum-map: Vue Daum Map Component

참고 링크 3: https://velog.io/@geommyeong/Vue.js-KakaoMap-API

Vue.js + KakaoMap API