TypeError: Cannot read properties of undefined (reading 'Geocoder')

지도/로컬 API
#1

안녕하세요. 저는 현재 vue.js 에서 coord2RegionCode 예제를 테스트하고 있는데요.
const geocoder = new kakao.maps.services.Geocoder() 이부분에서 계속 undefined 오류가 뜨고 있습니다.
도메인은 https://localhost:8080 로 설정했고, (http 는 401 에러 발생)

  1. 메소드에 아래 코드 추가
getAddress: function () {
      const geocoder = new kakao.maps.services.Geocoder()
      const callback = function(res, status) {
        if (status === kakao.maps.services.Status.OK) {
          alert(res)
          console.log(res);
        }
      }
      geocoder.coord2RegionCode(this.article['latitude'], this.article['longitude'], callback)
    }
  1. mounted 에 아래 코드를 추가했습니다.
mounted: function () {
    const script = document.createElement('script')
    /* global kakao */
    script.type = "text/javascript"
    script.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.VUE_APP_KAKAO_API_KEY}&libraries=services&autoload=false`
    document.head.appendChild(script)
  }

제 코드에 어떤 문제가 있는지 도움 부탁드립니다.

#2

동적으로 스크립트 로드를 하기 때문에
스크립트가 로드되기 전 geocorder 객체에 접근하려고 하면 오류가 납니다.
스크립트 로드가 된 다음 geocoder를 이용해주세요.

그리고 등록한 프로토콜(http, https) + 도메인 또는 서버 IP + 포트번호가 맞지 않는 경우 401 에러가 생길 수 있습니다.
http://localhost:8080 으로 도메인을 등록해서 401 에러가 나는지 다시 한번 확인해주세요.

#4

로드 했더니 해결됐습니다! 감사합니다

1개의 좋아요