Cannot read properties of undefined (reading 'Geocoder')

지도/로컬 API
#1

마운트 시킬 때
mounted() {
if (window.kakao && window.kakao.maps) {
this.initMap();
} else {
const script = document.createElement(“script”);
script.onload = () => kakao.maps.load(this.initMap);
script.src = //dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=${process.env.VUE_APP_KAKAOMAP_KEY};
console.log(script.src);
document.head.appendChild(script);
}
},

watch
watch: {
state변수명(val) {
// 주소-좌표 변환 객체를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();

  // 주소로 좌표를 검색합니다
  geocoder.addressSearch(
    "제주특별자치도 제주시 첨단로 242",
    function (result, status) {
      // 정상적으로 검색이 완료됐으면
      if (status === kakao.maps.services.Status.OK) {
        var coords = new kakao.maps.LatLng(result[0].y, result[0].x);

        // 결과값으로 받은 위치를 마커로 표시합니다
        var marker = new kakao.maps.Marker({
          map: this.map,
          position: coords,
        });

        // 인포윈도우로 장소에 대한 설명을 표시합니다
        var infowindow = new kakao.maps.InfoWindow({
          content:
            '<div style="width:150px;text-align:center;padding:6px 0;">우리회사</div>',
        });
        infowindow.open(this.map, marker);

        // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
        this.map.setCenter(coords);
      }
    },
  );
},

},

이렇게 최종적으로는 state의 도로명주소를 가져와서 위치 마커를 찍으려고 하는데
Cannot read properties of undefined (reading ‘Geocoder’) 이 에러가 뜨네요…
여러방면으로 찾아보고 이 사이트에서도 찾아봤는데 저한테 맞는 해결책이 안보여서요…
어떻게 해결하면 될까요??
넘 어렵네요…

#2

호출에 필요한 도메인을 모두 등록한 후, API를 호출하셔야 하는데
도메인 등록과정에서 누락된 도메인들이 있는 것으로 보입니다.
필요한 도메인은 각각 모두 등록되어야 정상적인 호출결과를 얻을 수 있습니다.
도메인 등록 내역을 확인해보신 후 다시 호출해보세요.

#3

마운트시에 카카오api 호출해서 사용하고 있는거 아닌가요?? 어느 부분에서 도메인 호출이 누락된건지 감이 잡히지를 않네요…

#4

Geocoder는 아래와 같이 services 라이브러리 파라미터를 추가해야 합니다.
아래와 같이 수정해주세요.

script.src='//dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=${process.env.VUE_APP_KAKAOMAP_KEY}&libraries=services';
#5

답변감사합니다!! 무슨말씀인지 몰라 이것저것 다해보다가 겨우 이해했습니다 ㅎㅎ
근데 마운트 후 initMap 메서드
initMap() {
const container = document.getElementById(“map”);
const options = {
center: new kakao.maps.LatLng(33.450701, 126.570667),
level: 5,
};
this.map = new kakao.maps.Map(container, options);
}
를 통해서 현재 맵을 로컬 변수에 저장해서 쓰는데

watch 부분의
// 결과값으로 받은 위치를 마커로 표시합니다
var marker = new kakao.maps.Marker({
map: this.map,
position: coords,
});
이 부분에서
Cannot read properties of undefined (reading ‘map’) 에러가 발생하는데요
this.map을 console.log로 찍어도 map을 이미 갖고 있고
따로 버튼하나 추가해서 위도경도 하나 임의로 지정해놓은것을 가지고 클릭 이벤트로 this.map으로 마커 찍어보니 잘 찍히는데 위의 케이스에서는 map이 undefined 되엇다고 에러가 나버리네요…
혹시 원인이 무엇인지 알 수 있을까요?

자꾸 물어서 죄송합니다 ㅠㅠ

#6

해결했습니다… 함수의 종류에 따라 this가 지칭하는 대상이 바뀌는걸 깜빡햇네요…

1개의 좋아요