Vue.js + KakaoMap API

카카오맵을 Vue.js 에서 사용하기

카카오맵 api를 vue.js로 사용하려면 고려할 것이 몇가지 있다.

1. package.json 에 eslintConfig 세팅.
   new kakao를 등록되지 않는 변수로 처리하기 때문에 false 로 처리해야 한다.

"eslintConfig": {
	"globals": {
	    "kakao": false
    }
}

2. Map 이 있는 컴포넌트에 Mouted 되었을 때 코드 작성
   주의할 점은 비동기로 처리해야 하기 때문에 autoload=false 코드가 필요 함

 mounted() {
    if (window.kakao && window.kakao.maps) {
      this.initMap()
    } else {
      const script = document.createElement('script')
      script.onload = () => kakao.maps.load(this.initMap);
      script.src = 'http://dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=`${my_api_key}`'
      document.head.appendChild(script)
    }
  },

3. methods에 initMap() 메서드 작성

methods: {
    initMap () {
      const container = document.querySelector('#map')
      const options = {
        center: new kakao.maps.LatLng(35.19656853772262, 129.0807270648317),
        level: 3
      }
      const map = new kakao.maps.Map(container, options)
      const markerPosition = new kakao.maps.LatLng(35.19656853772262, 129.0807270648317);

      const marker = new kakao.maps.Marker({
        position: markerPosition
      });
      marker.setMap(map)
  }

4. 린트쪽에서 정의되지 않은 변수 관련해서 에러를 뱉을 수 있다.
   변수 옆에 주석 처리 혹은, vue.config.js 에 devServer.overlay:false 로 처리하면 가능하다고는 하는데, 확인불가. 주석은 확인 됨// eslint-disable-line no-unused-vars

=> eslintConfig.rules.no-unsed-vars = off 처리 시 린트 에러가 나지 않음

"eslintConfig" : {
	"rules" : {
   	"no-unused-vars": "off"
   }
}