Ä«Ä«¿À¸Ê(Kakao Áöµµ) API ÃÊ°£´Ü »ç¿ë¹æ¹ý (for Web)
Ä«Ä«¿À¸Ê(Kakao Áöµµ) API ÃÊ°£´Ü »ç¿ë¹æ¹ý (for Web)
³²¾çÁÖ°³¹ßÀÚ
¡¤2020. 2. 20. 16:52
🤚 ½ÃÀÛÇϱâ Àü¿¡
Ä«Ä«¿À¸Ê(Kakao Áöµµ) Javscript API´Â Å° ¹ß±ÞÀ» ¹Þ¾Æ¾ß »ç¿ëÇÒ ¼ö ÀÖ½À´Ï´Ù.
±×¸®°í Å°¸¦ ¹ß±Þ¹Þ±â À§Çؼ´Â Ä«Ä«¿À °èÁ¤ÀÌ ÇÊ¿äÇÕ´Ï´Ù.
🔑 Å° ¹ß±Þ °úÁ¤
1. Ä«Ä«¿À °³¹ßÀÚ»çÀÌÆ® (https://developers.kakao.com) Á¢¼Ó
2. °³¹ßÀÚ µî·Ï ¹× ¾Û »ý¼º
3. À¥ Ç÷§Æû Ãß°¡: ¾Û ¼±Åà – [¼³Á¤] – [ÀϹÝ] – [Ç÷§Æû Ãß°¡] – À¥ ¼±Åà ÈÄ Ãß°¡
4. »çÀÌÆ® µµ¸ÞÀÎ µî·Ï: [À¥] Ç÷§ÆûÀ» ¼±ÅÃÇÏ°í, [»çÀÌÆ® µµ¸ÞÀÎ] À» µî·ÏÇÕ´Ù. (¿¹: http://localhost:8080)
5. ÆäÀÌÁö »ó´ÜÀÇ [JavaScript Å°]¸¦ Áöµµ APIÀÇ appkey·Î »ç¿ëÇÕ´Ï´Ù.
6. ¾ÛÀ» ½ÇÇà
¾Æ·¡´Â À§ Å° ¹ß±Þ °úÁ¤¿¡ ´ëÇÑ »ó¼¼ ¼³¸íÀÔ´Ï´Ù.
Ä«Ä«¿À °³¹ßÀÚ °èÁ¤À» µî·ÏÇÑ ÈÄ Ä«Ä«¿À¸ÊÀ» »ç¿ëÇÒ ¾ÖÇø®ÄÉÀ̼ÇÀ» »ý¼ºÇÕ´Ï´Ù. ¾ÖÇø®ÄÉÀÌ¼Ç »ý¼ºÇÏ´Â ¹æ¹ýÀº ¾Æ·¡¿Í °°½À´Ï´Ù.
¾ÖÇø®ÄÉÀÌ¼Ç ¾ÆÀÌÄÜ, ¾Û À̸§ ±×¸®°í ȸ»ç¸í(¾ø´Ù¸é ¾Æ¹« °ªÀ̳ª ³ÖÀ¸¸é µË´Ï´Ù)À» ³Ö°í ¾Û ¸¸µé±â¸¦ ´©¸£½Ã¸é ¾Æ·¡¿Í °°ÀÌ ¾ÖÇø®ÄÉÀ̼ÇÀÇ Å°°¡ »ý¼ºµË´Ï´Ù. ÀúÈñ´Â Javascript Å°¸¦ ÀÌ¿ëÇÒ °Í ÀÔ´Ï´Ù.
¾ÖÇø®ÄÉÀ̼ǿ¡ ÀúÈñ°¡ »ç¿ëÇÒ µµ¸ÞÀÎÀ» Ãß°¡ÇØ¾ß Ä«Ä«¿À¿¡¼ Á¦°øÇÏ´Â ½ºÅ©¸³Æ®¸¦ Á¤»óÀûÀ¸·Î »ç¿ëÇÒ ¼ö ÀÖ½À´Ï´Ù. Ç÷§Æû Ãß°¡¿¡¼ ÀúÈñ°¡ »ç¿ëÇÒ »çÀÌÆ® µµ¸ÞÀÎÀ» Ãß°¡ÇÕ´Ï´Ù. ·ÎÄü¹ö(ex. http://localhost:3000)¿¡¼ Å×½ºÆ®ÇÏ·Á¸é Ç÷§Æû Ãß°¡¿¡ ·ÎÄü¹öÀÇ ÁÖ¼Ò(Æ÷Æ®±îÁö)¸¦ ±âÀÔÇØ¾ß »ç¿ëÇÒ ¼ö ÀÖ½À´Ï´Ù.
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=¹ß±Þ¹ÞÀº APP KEY¸¦ ³ÖÀ¸½Ã¸é µË´Ï´Ù."></script>
💻 Nuxt.js¿¡¼ Ä«Ä«¿À¸Ê »ç¿ë ¿¹Á¦
nuxt.config.js
head: {
script: [
{
src: `//dapi.kakao.com/v2/maps/sdk.js?appkey=appkey¸¦ ³Ö¾îÁÖ¼¼¿ä`
}
]
},
ÄÄÆ÷³ÍÆ®
<template>
<div class="container">
<div id="map" style="width:100vw;height:100vh;"></div>
</div>
</template>
<script>
export default {
mounted() {
const container = document.getElementById('map'); //Áöµµ¸¦ ´ãÀ» ¿µ¿ªÀÇ DOM ·¹ÆÛ·±½º
const options = { //Áöµµ¸¦ »ý¼ºÇÒ ¶§ ÇÊ¿äÇÑ ±âº» ¿É¼Ç
center: new kakao.maps.LatLng(33.450701, 126.570667), //ÁöµµÀÇ Áß½ÉÁÂÇ¥.
level: 3 //ÁöµµÀÇ ·¹º§(È®´ë, Ãà¼Ò Á¤µµ)
};
const map = new kakao.maps.Map(container, options); //Áöµµ »ý¼º ¹× °´Ã¼ ¸®ÅÏ
}
}
</script>
<style>
</style>
👋¸¶¹«¸®
Áö±Ý±îÁö Ä«Ä«¿À °³¹ßÀÚ»çÀÌÆ®¿¡¼ Å°¸¦ ¹ß±Þ¹Þ°í ¼ºñ½º µî·Ï, µµ¸ÞÀÎ µî·Ï ÈÄ ½ÇÁ¦ ¾ÖÇø®ÄÉÀ̼ǿ¡¼ Ä«Ä«¿À¸ÊÀ» »ç¿ë±îÁö ÇغýÀ´Ï´Ù.
Ä«Ä«¿À ·Î±×ÀÎÀº ¿©±â¿¡¼ Âü°íÇÏ½Ç ¼ö ÀÖ½À´Ï´Ù.
0°³ÀÇ ´ñ±Û