Javascript Kakao Web Api Plugin으로 사용하기 - woowacourse-teams/2020-songpa-people GitHub Wiki
카카오 맵 API 를 사용하기 위해서 앱을 등록해야 합니다.
https://developers.kakao.com/ 로 이동해서 앱을 등록합시다.
플랫폼은 Web으로 등록하고
앱키 사용은 Javascript 키에 등록된 키를 사용하면 됩니다.
로컬 테스트를 위해서 플랫폼 탭에 있는 Web의 사이트 도메인을 localhost로 잡아둡니다.
나중에 프로덕션 환경에 발급 받은 IP를 추가하면 될 것 같습니다.
플러그인은 전역 수준 기능을 Vue로 추가하는 것입니다.
카카오 지도를 띄우기 위해서는 특정 script를 임포트하고 선행 실행이 되어야 합니다.
이러한 작업을 편하게 하기 위해서 plugin을 작성하여 사용하였습니다.
Vue의 공식 홈페이지에서 plugin의 작성 방법을 참고하였습니다.
아래는 완성된 plugin의 전문입니다.
주석으로 단락을 분리하여 설명하겠습니다.
export default {
install(Vue) {
// === 1
const script = document.createElement("script");
script.src =
"//dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=" + KAKAO_WEB_KEY;
document.head.appendChild(script);
// === 1
// === 2
/* global kakao */
const loadApi = new Promise(resolve => {
script.onload = () => kakao.maps.load(resolve);
});
// === 2
// === 3
Vue.prototype.$loadMap = async nowPosition => {
await loadApi;
const options = createOptions(nowPosition);
const container = document.getElementById("kakao-map");
this.map = new kakao.maps.Map(container, options);
this.map.setMapTypeId(kakao.maps.MapTypeId.NORMAL);
};
// === 3
// === 4
const createOptions = nowPosition => {
return {
center: createKakaoMapsLatLng(nowPosition),
level: 5,
};
};
// === 4
// === 5
const createKakaoMapsLatLng = nowPosition => {
const position = nowPosition || KAKAO_MAP.JAMSIL_STATION_8_EXIT;
return new kakao.maps.LatLng(position.latitude, position.longitude);
};
// === 5
},
};플러그인은 main.js 에서 Vue.use(pluginName) 을 이용해서 사용합니다.
use 함수를 사용하면 해당 플러그인의 install 메서드가 실행이 됩니다.
const script = document.createElement("script");
script.src =
"//dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=" + KAKAO_WEB_KEY;
document.head.appendChild(script);script 엘리먼트를 생성하고 src 속성 값을 부여합니다.
KAKAO_WEB_KEY 위치에 발급 받은 앱 키를 사용하면 됩니다.
Document.head.appendChild(script)를 이용해서 head 에 해당 script를 추가하도록 합니다.
body 하단에 추가하지 않은 이유는 script의 로드가 선행되어야 하기 때문에 head에 추가한 것 입니다.
/* global kakao */
const loadApi = new Promise(resolve => {
script.onload = () => kakao.maps.load(resolve);
});script.onload가 실행된후 kakao.maps.load를 실행하도록 지정합니다.
카카오 맵 플러그인을 사용하여 기능을 추가할 때 loadApi가 반드시 선행되어야 합니다.
/\* global Kakao \*/ 이 정확히 어떻게 동작하는지 모르겠지만 kakao를 전역변수로 등록해주기 때문에 해당 주석을 제외하게 된다면 lint 에서 error가 발생하기 때문에 반드시 추가하고 사용해야 합니다.
Vue.prototype.$loadMap = async nowPosition => {
await loadApi;
const options = createOptions(nowPosition);
const container = document.getElementById("kakao-map");
this.map = new kakao.maps.Map(container, options);
this.map.setMapTypeId(kakao.maps.MapTypeId.NORMAL);
};.vue 파일에서 가장 먼저 선행되어야 하는 함수입니다.
loadApi를 동기적으로 실행하여 kakao api를 사용할 수 있도록 합니다.
options 에는 지도를 띄울 위치와 지도의 초기화 해상도를 설정합니다.
container에 맵을 띄울 elementId를 지정합니다. (예제는 kakao-map)
new kakao.maps.Map(container, options)을 호출하여 맵을 생성하고 등록합니다.
this.map.setMapTypeId(kakao.maps.MapTypeId.NORMAL)는 지도의 모습을 설정합니다.
const createOptions = nowPosition => {
return {
center: createKakaoMapsLatLng(nowPosition),
level: 5,
};
};카카오 맵을 만들때 사용하는 option을 정의하는 함수 입니다.
center에 지도의 중심 위치 값을 지정하고 level에 지도의 해상도를 지정합니다.
const createKakaoMapsLatLng = nowPosition => {
const position = nowPosition || KAKAO_MAP.JAMSIL_STATION_8_EXIT;
return new kakao.maps.LatLng(position.latitude, position.longitude);
};Kakao에서 사용하는 좌표변수를 생성합니다. WGS84 기준의 좌표를 이용하여 생성합니다.
<template>
<div id="kakao-map"></div>
</template>
<script>
export default {
name: "KakaoMap",
async mounted() {
await this.$loadMap();
},
};
</script>
<style scoped>
#kakao-map {
width: 100%;
height: 600px;
}
</style>
kakao-map으로 id 를 설정하여 맵이 생성될 위치를 지정하였고
mounted 단계에서 map을 load 합니다.
이제 해당 컴포넌트를 사용하면 카카오 맵이 생성됩니다.