[Vue.js] Daum Map Api 사용하기

Daum Map(다음맵)을 Vue.js에서 쓰기

다음맵 api는 CDN만 제공해서 NPM을쓰는 vue는 정상적으로 다음맵api를 갖다 쓸 수 없다.

정상적인 방법은 아니지만, 되는거같아서 적어본다.

다른 CDN도 이런식으로 하니깐 되긴한다.

 

1. 루트에 있는 index.html에 해당 스크립트를 넣는다.

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=자신의키&libraries=services"></script>

2. dmap.vue를만들고, template에 id="dmap"인 div를 만든다. 그안에 다음맵을 받을 id="map"인 div를 만들면 된다.

<div id="dmap">안에서 자유자재로 코딩하면 되는거 같다. 

<template>

  <div id="dmap">
    <h1>{{msg}}</h1>
    <div id="map" style="width:100%; height:400px;"></div>
  </div>

</template>

<script>

  export default {
    name: 'dmap',
        data() {
      return {
        msg:"다음맵 테스트"
      }
    },
    mounted() {
      var container = document.getElementById('map');
        var mapOptions = {
            center: new daum.maps.LatLng(위도, 경도),
            level: 4 //지도의 레벨(확대, 축소 정도)
        };
        var map = new daum.maps.Map(container, mapOptions);
    }
  }
</script>

<style scoped>

</style>

3. index.js에 라우터 추가

4. npm start

 

임시해결법이라 문제가 있을 수 있다. 즉각적 로딩이 안된다던지, 리로드가 안된다던지...

아무튼 이렇게 계속 쓰고 있는데 아직까진 별문제가없었다.

이렇게 썼을 때, 문제점을 알고있으신분은 댓글 달아주시면 감사하겠습니다.