[Vue] Naver Map 네이버 지도 구현 Example(in Nuxt)

vue naver map에 대해 구글링 해서 찾은 

"vue naver maps" 가이드를 보고 구현을 해보았다.

참고  https://shin-jaeheon.github.io/vue-naver-maps/#/

Vue 초.보.인 나로써 바로 내 소스에 녹이기에는 쉽지 않았다;;

게다가 vue의 팝업 위 팝업이라 이틀 정도 걸렸다.

아래 적용한 소스를 example로 올려본다

내 소스 환경 -> Vue + NuxtJS

1. nuxt.config.js

디렉토리 위치(프로젝트 바로 밑.  /C/workspace/project1/nuxt.config.js)

 plugins: [
    "~/plugins/naverMap.js"
  ],

2. naverMap.js

디렉토리 위치(/C/workspace/project1/plugins/naverMap.js)

import Vue from 'vue'
import naver from 'vue-naver-maps';

Vue.use(naver, {
  clientID: '23dumy1d' //네이버에서 받은 클라이언트 아이디
});

3. naver_map.vue

디렉토리 위치(/C/workspace/project1/pages/order/popup/naver_map.vue)

<script>
export default {
  name: 'naverMap',
  data() {
    return {
      width: 560,
      height: 560,
      info: false,
      marker: null,
      count: 1,
      map: null,
      isCTT: false,
      mapOptions: {
        lat: 37,
        lng: 127,
        zoom: 10,
        zoomControl: true,
        zoomControlOptions: {position: 'TOP_RIGHT'},
        mapTypeControl: true,
      },
      initLayers: ['BACKGROUND', 'BACKGROUND_DETAIL', 'POI_KOREAN', 'TRANSIT', 'ENGLISH', 'CHINESE', 'JAPANESE']
    }
  },
  computed: {},
  methods: {
    onLoad(map) {
      this.map = map;
    },
    onWindowLoad(that) {
    },
    onMarkerClicked(event) {
      this.info = !this.info;
    },
    onMarkerLoaded(vue) {
      this.marker = vue.marker;
    },
    close() {
      this.$parent.closeMap()
      console.log('close map self', this.$parent)
    }
  }
}
</script>
<template>
  <div class="container-fluid pop-wrap" v-if="this.$parent.naverMapVisible">
    <div class="pop-con w400">
      <div class="pop-header">
        <h1>
          <i class="ico-car"></i>
          지도보기
        </h1>
        <button @click="close"><i class="ico-close"></i>닫기</button>
      </div>
      <div class="pop-container">
        <div class="map-box">
          <naver-maps
            :width="this.width"
            :height="this.height"
            :mapOptions="this.mapOptions"
            :initLayers="this.initLayers">
          </naver-maps>
        </div>
      </div>
      <div class="pop-foot-btns">
        <button @click="close" class="pop-btn btn-blue"><i class="ico-save"></i>확인</button>
      </div>
    </div>
  </div>
</template>

아직 마커구현이나 다른 기능은 없어 추가기능은 추후 글을 다시 등록하는걸로 하고 마무리 ㅎㅎ