Vue에서 kakao map api 사용하는 방법에 대한 질문

카카오맵 API (지도/로컬)
,
1

vue에서 kakao map api를 사용하는 중인데 index.html에 샘플 코드의 부분을 넣으면 문제 없이 작동하는데 다른 vue 파일에서 쓰려고 할 때 자꾸 kakao is not defined 이라는 에러를 냅니다.

앱키와 플랫폼은 잘 설정을 했기 때문에 html에서는 잘 동작한 거 같은데 vue에서는 어떻게 해야하는지 잘 모르겠습니다.

2

이전 vue로 작업한 분이 상세히 답을 달아주셔서 해당 링크 첨부해드립니다.
https://devtalk.kakao.com/t/spa/64079/3?u=lea.ju

3

보내주신 내용 확인해보았는데 잘 안되네요… 답변해주셔서 정말 감사합니다!

4

저하고 똑같은 문제네요. KT인터넷가입

5

코드를 올려주시면 가이드 해 드리겠습니다.

일단 대략적인 방식은

이 깃헙의 내용을 참고해 주세요. 기본적인 기능들은 잘 구현되어 있습니다.
(thx. okchangwon)

10

kakao is not defined를 해결하지 못해서 일단 vue-daum-map를 이용해서 지도를 로드를 했었는데 이 방법은 기존 kakao api의 모든 기능을 다 쓸 수 없다고 생각해서 이 오류를 해결하고 싶었습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>vuetify-admin-webpage</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
  </head>
  <body>
    <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=xxxx"></script>
    <!-- <div id="map" style="width:500px;height:400px;"></div>
    
    <script>
      var container = document.getElementById('map');
      var options = {
        center: new kakao.maps.LatLng(33.450701, 126.570667),
        level: 3
      };

      var map = new kakao.maps.Map(container, options); -->
    </script>
    <noscript>
      <strong>We're sorry but vuetify-admin-webpage doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

이 코드에서 주석을 지우면 html에서 지도가 나옵니다. 하지만 저는 이 html에 지도가 나오는 것을 원한 것이 아니라서 script src만 두고 map.vue라는 파일에서 mounted할 때 map 정보를 가져오기로 했습니다.

<template>
  <div id="map" style="width:500px;height:400px;"></div>
</template>

<script>
export default {
  mounted () {
    var container = document.getElementById('map');
    var options = {
      center: new kakao.maps.LatLng(33.450701, 126.570667),
      level: 3
    };

    var map = new kakao.maps.Map(container, options);
  }
}
</script>

로 했을 때 kakao is not defined라는 오류가 나옵니다.

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

<script>
export default {
    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 = 'http://dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=YOUR_APPKEY';
            document.head.appendChild(script);
        }
    },
    methods: {
        initMap() {
            var container = document.getElementById('map');
            var options = {
              center: new kakao.maps.LatLng(33.450701, 126.570667),
              level: 3
            };

            var map = new kakao.maps.Map(container, options);
            map.setMapTypeId(kakao.maps.MapTypeId.HYBRID);
        }
    }
}
</script>

<style>
#map {
    width: 400px;
    height: 300px;
}
</style>
3개의 좋아요
13

와 지도가 잘 나옵니다! 참고해서 수정하도록 하겠습니다. 정말 감사합니다!!

1개의 좋아요
14

nuxt 에서는 위 comment들이 모두 안먹히네요.
해결하는데 살짝 고생했어요.

15

혹시 nuxt에서 어떻게 하셨는지 알 수 있을까요?