카카오 지도 카테고리 오버레이 마커 생성안됨

카카오맵 API (지도/로컬)
1

[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
https://devtalk.kakao.com/t/faq-api/125610

우선 도메인 주소입니다. naneopet.com/test.html
개인 프로젝트로 좌측상단의 카테고리를 누르면 해당하는 위치에 마커를 생성시켜 위치를 표현해주려 합니다.

여러가지 버전으로 다양하게 시도해 봤지만 마커이미지가 없이 흰색 빈칸 혹은 오류로 인해 빈칸도 생성이 안되고 있습니다.

현재 페이지에 적용된 코드의 문제부분입니다. Uncaught TypeError: this.T.vd is not a function
오류가 나오며 아무 이미지가 나오지 않습니다.

이 코드는 마커이미지를 카카오maps api에서 받아오는 코드를 지우고 마커이미지에 바로 이미지 주소를 입력하였습니다
image

마커이미지의 주소, 크기, 옵션을 받아오는 함수(createMarkerImage) 를 건들이지 않고, 마커이미지를 호출할때 이미지 주소를 바로 입력한다면 흰색 빈칸이 생성되고 이미지를 못 받아오고 있습니다

이 경우 코드파일은 naneopet.com/front.html 입니다.

흰색 빈칸의 경우 동물병원을 누르시고 지도 우측방향에 구미지방법원 하단을 볼 경우 확인하실수 있습니다.

개인적으로 해결하고 싶었으나 도저히 해결이 안되어 질문남겨드립니다…

2

createMarkerImage에서 받는 image는 kakao.maps.MarkerImage 객체여야 합니다.
디버깅해 보면 image는 url로 넘겨주고 있어서 오류가 나고 있습니다.
image를 string이 아닌 아래와 같이 MarkerImage 객체로 생성해서 확인해 주세요.

let imageSrc = 'http://naneopet.com/hospitalMarker.png', // 마커이미지의 주소입니다
    imageSize = new kakao.maps.Size(64, 69), // 마커이미지의 크기입니다
    imageOption = {offset: new kakao.maps.Point(27, 69)}; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.
image = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption);
1개의 좋아요
3

소중한 답변 감사합니다. 우선, 제가 제대로 이해하였는지 궁금합니다. createMarkerImage에서 받는 이미지는 kakao.maps.MarkerImage 객체여야 하는데, 제가 적용할려는 이미지를 객체가 아닌 url로 바로 넣어서 문제가 되는것으로 인지하였습니다.

말씀해주신 코드를 naneopet.com/test.html 의 소스에 105번째 줄에 넣었을땐, 이미지가 생성되지 않고 있습니다.

현재는 여러 시도끝에 87번째 줄에 넣었고, 기본 마커 이미지가 생성되었습니다.

부족한 제 지식으로 여러가지 시도를 하였으나 말씀해주신 코드를 소스 어디부분에 넣어야 할지 감을 못잡고 있습니다 ㅠㅠ…
정말 친절히 좋은답변 주셨으나 제대로 이해하지 못해 죄송합니다… 한번만 더 도와주시면 정말 감사하겠습니다!!

4

createMarkerImag에서 생성한 이미지 객체를 return 하고 있지 않고 있습니다.
리턴되는 값이 없어서 markerImage는 undefined으로 넘어가고 마커를 생성할 때 image옵션이 undefined라서 기본 이미지로 표시되고 있어요.
createMarker 함수에서 디버깅을 해보면 image가 undefined인 걸 확인할 수 있습니다.
createMarkerImage에서 생성한 MarkerImage객체를 리턴해서 다시 한번 확인해 주세요.

1개의 좋아요
5

리턴값을 조정하고, 함수명을 변경하여 여러개 만들어서 적용하니 정상적으로 이미지가 출력되네요 정말 감사합니다!!!

혼자 공부하고 검색해서 적용해도 실패했던건데 알려주셔서 감사합니다!!

1개의 좋아요