vue - 카카오내비 연동

웹뷰를 이용하여 프로젝트를 진행 중 네비게이션이 필요해서 카카오내비 api를 프로젝트에 반영하였다. 반영에 어려움은 없었으나 내용을 기록하고자 한다. 

*카카오내비를 이용하기 위해선 사용자가 카카오내비 앱을 설치하여야 한다.

 

1. index.html 파일에 kakao javascript sdk 추가하기

<script src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>

 

2. main.ts(main.js)에서 window객체에 kakao js key init

ts를 이용한다면 main.ts 아니라면 main.js에 kakao js key를 init 한다. key는 보안 때문이라도 문자열 값을 그대로 넣는 것이 아닌 환경변수에 등록하여 사용하는 것이 좋다.

// 카카오디벨로퍼에서 발급받은 js key
window.Kakao.init(process.env.VUE_APP_KAKAO_KEY);

 

3. 카카오내비를 실행시킬 vue파일

<template>
  <div>
    <a id="start-navigation" href="#" @click="startNavigation">
      <img
        src="https://developers.kakao.com/assets/img/about/buttons/navi/kakaonavi_btn_medium.png"
        alt="길 안내하기 버튼"
      />
    </a>
  </div>
</template>
<script lang="ts">
import Vue from "vue";

export default Vue.extend({
  methods: {
    startNavigation(): void {
      window.Kakao.Navi.start({
      	// 네비에 보여줄 목적지 이름
        name: "현대백화점 판교점",
        // 목적지 경도
        x: 127.11205203011632,
        // 목적지 위도
        y: 37.39279717586919,
        coordType: "wgs84",
        // 종료결과를 받아올 uri이며 목적지 도착시 해당 uri의 페이지가 띄어진다.
        returnUri: "uri",
      });
    },
  },
});
</script>

위의 과정대로 진행을 한다면 정상적으로 카카오내비 앱이 켜지며 길 안내가 시작된다.