장소(전시장)를 기록하는 앱을 만들어 보자(2)😎

지금부터 vue에서 카카오맵을 불러오는 마법을 부려보고자 한다.

카카오 지도 api DOC

먼저 map을 표시해줄 div 태그를 #map 만들어 줍니다.

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

그런다음, 카카오에서 제공하는 api를 사용하기 위해, sdk형식으로 가져와야한다.

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

<script>
export default {
  name: "KakaoMap",
  data() {
    return {
      modalOpen: false,
      keywordSearch: "",
      closeBtn: false,
    };
  },
  mounted() {
    // ! 카카오맵 초기 설청 -------------------------------------------------
    if (window.kakao && window.kakao.maps) {
      this.initMap();
    } else {
      const script = document.createElement("script");
      /* global kakao */
      script.onload = () => kakao.maps.load(this.initMap);
      script.src =
        "//dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=appkey&libraries=services,clusterer,drawing";
      document.head.appendChild(script);
    }
  },
  methods: {
    // !맵 초기 셋팅 --------------------------------------------------
    initMap() {
      const container = document.getElementById("map");
      const options = {
        center: new kakao.maps.LatLng(
          this.$store.state.mainLocation.lat,
          this.$store.state.mainLocation.lng
        ),
        level: this.$store.state.viewLevel,
      };
      const map = new kakao.maps.Map(container, options);
      this.map = map;
    },
  },
};
</script>

vue 라이프사이클 훅 mounted를 통해,
html head태그 밑에 script 태그를 만들고, methods 내에 initMap을 작동하게 onload 해준다.

public폴더내에 index.html에 직접 코드를 추가 해보기도 했는데, 오류가 나 찾는 와중 이렇게 javascript로 태그를 만들어주고 경로를 넣어주는 방법을 택했다.

kakao dev talk

함수 initMap은 맵을 만들기 위한 함수인데, 카카오에서 안내하길, 총 3가지의 파라메터 container, options, map 을 설정해주어야 한다. 그중에 options의 속성중 center는 반드시 필요하다고 한다.

vuex를 통해 center에 필요한 위도와 경도를 지정해주었다.

export default createStore({
 state: {
   mainLocation: {
     lat: 35.1775975996367,
     lng: 129.1154036580446,
   },
});

그러고 나서

npm run serve

해주면!

설정한 위도 경도가 중심으로한 지도가 보여진다!!!

ps.
카카오맵 위도 경도 알수 있는 사이트