[Vue.js] 카카오 지도 API 커스텀 오버레이 표시되지 않는 문제 및 Vue.js 용 카카오 지도 API 예제

1. 카카오 지도 API 커스텀 오버레이 표시되지 않는 문제

[그림 1] 지도에 커스텀 오버레이가 표시된 화면

 

새로고침 시 커스텀 오버레이가 화면에 표시되지 않는 문제가 발생했다. setTimeout으로 1초 멈춘 후 커스텀 오버레이를 그리도록 하여 문제를 해결했다.

 mounted() {
    if (window.kakao && window.kakao.maps) {
      this.initMap()
      this.displayCustomOverlay()
    } 
    // 아래는 새로고침시 실행되는 코드이다. 커스텀 오버레이가 표시되지 않는 문제가 발생하였다.
    // setTimeout으로 1초 멈춘 후 커스텀 오버레이를 그리도록하여 문제를 해결했다.
    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=${process.env.VUE_APP_KAKAOMAP_KEY}`
      document.head.appendChild(script)
      setTimeout(() => {
        this.displayCustomOverlay()
      }, 1000)
    }
  },

 

😛 Vue.js 용 카카오 지도 API 예제: Vue.js용 카카오 지도 API 예제이다. 새로고침 시 커스텀 오버레이가 화면에 표시되지 않는 문제로 인해 찾다가 발견했다. 이 예제로 문제를 해결할 수 있었던 것은 아니나 Vue.js에서의 카카오 지도 API 사용법을 참고할만하다(https://codesandbox.io/s/nervous-keldysh-87yxg).

 

2. 데이터가 원인이었다!

displayCustomOverlay() 메서드에서 이용하는 배열 데이터가 새로 고침(F5)하게 되면 빈 배열되기 때문에 발생한 문제였다. 값이 없으니 오버레이가 실종될 수밖에...

커스텀 오버레이가 레벨(센서 없음, 정상, 경계, 심각, 위험, 통신장애) 데이터에 따라 동적으로 스타일이 변경되어야 하기 때문에 computed와 watch를 사용해 데이터에 변경이 생기면 즉시 반영되도록 처리하였다.

computed: {
    gidSensingLevel() {
      return this.$store.state.gid
        .filter((_, i) => this.$store.state.gidManhole.length !== 0)
        .map((_, i) =>
          Math.max(...this.$store.state.gidManhole[i][1].manholeLevel)
        )
    }
  },
  watch: {
    // computed를 통해 계산된 gidSensingLevel 값이 변경되는지 감시
    // gidSensingLevel 값이 변경되면 displayCustomOverlay() 메서드 호출
    gidSensingLevel() {
      this.displayCustomOverlay()
    }
  },