D-18 카카오 rest api 관련 오류 (해결)

브라우저 오류

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

원인 - 라이브러리 인식이 안되는듯 지도 자체는 로딩되는걸 보니 키값이 틀린건 아님

안보이는 공백도 제거해봄

네트워크 확인해보니 정상

공백 문제인듯?

해결

https://devtalk.kakao.com/t/react-kakao-maps-cannot-read-property-geocoder-of-undefined/115215

React Kakao Maps 구현시 Cannot read property ‘Geocoder’ of undefined 오류

 

오류

apt:108 Uncaught TypeError: kakao.maps.LatLng is not a constructor

 

load 함수 사용햇는데 왜...

와씨 결국 찾아냄 

2시간걸림

src="//dapi.kakao.com/v2/maps/sdk.js?appkey=앱키&libraries=services,clusterer,drawing&autoload=false"></script>

 

---

주소 리스트 -> for문 돌려서 좌표 리스트 만들기 -> 클러스터러로 표현하기

 

고민 1

for문을 어디서 돌리는게 맞을까.. 

아예 리스트를 매개변수로 보내서 그 안에서 리스트 길이만큼 돌릴까 아니면 하나씩 꺼내오는걸로 받아서 리스트를 만들까

고민2 

좌표 정보를 apt 객체에 저장하는게 좋은지 아니면 새로 객체를 만드는게 좋은지... 머루겟삼

 

 

타임리프 인라인

리스트 형식으로 담은거 json으로 만들기

[{"lng":"126.919446053291","addressName":"서울 마포구 서교동 447-5","lat":"37.5564857555897"}]

 

잘 받는데 왜..

Exception processing template "cluster": Error resolving template [cluster], template might not exist or might not be accessible by any of the configured Template Resolvers

 

애초에 cluster 요청한적도 없는데

 

2024-04-24 15:07:55.216 ERROR 9704 --- [nio-8088-exec-1] org.thymeleaf.TemplateEngine             : [THYMELEAF][http-nio-8088-exec-1] Exception processing template "cluster": Error resolving template [cluster], template might not exist or might not be accessible by any of the configured Template Resolvers

org.thymeleaf.exceptions.TemplateInputException: Error resolving template [cluster], template might not exist or might not be accessible by any of the configured Template Resolvers
at org.thymeleaf.engine.TemplateManager.resolveTemplate(TemplateManager.java:869) ~[thymeleaf-3.0.15.RELEASE.jar:3.0.15.RELEASE]
at org.thymeleaf.engine.TemplateManager.parseAndProcess(TemplateManager.java:607) ~[thymeleaf-3.0.15.RELEASE.jar:3.0.15.RELEASE]
at org.thymeleaf.TemplateEngine.process(TemplateEngine.java:1098) [thymeleaf-3.0.15.RELEASE.jar:3.0.15.RELEASE]
at org.thymeleaf.TemplateEngine.process(TemplateEngine.java:1072) [thymeleaf-3.0.15.RELEASE.jar:3.0.15.RELEASE]

 

해결

return codezip.toString();

String 으로 보내줘얗..

 

/*  //중심좌표가 바뀌면 리스트 재검색
kakao.maps.event.addListener(map, 'center_changed', function() {

      // 지도의  레벨을 얻어옵니다
    var level = map.getLevel();

    // 지도의 중심좌표를 얻어옵니다 
    var latlng = map.getCenter();  

    //alert("중심좌표 변경");

}); */

var markers = new kakao.maps.Marker({
         position: new kakao.maps.LatLng(position.lat, position.lng)
     });
    

        var clusterer = new kakao.maps.MarkerClusterer({
                map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체 
                averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정 
                minLevel: 5, // 클러스터 할 최소 지도 레벨 
                markers: markers // 클러스터에 마커 추가
        });

1. 현재 화면의 좌표값을 보내서 그 안에 있는 리스트만 걸러서 가져오는 방법

2. 리스트를 보내서 코드를 가져오는 방법, 

 

두가지가 있는데 당연히 1번이 효율적이다. 

아니

아닌가??

당연한가????

 

일단 2번은 쉬움...

 

+) 추가 처리

마커가 1개 이하면 클러스터러가 안생기는데 이럴 경우 마커를 찍어줘야 한다. 

그냥 마커면 안되고 클러스터러 모양 마커여야 할 듯... 

아니 생각해보니까 클러스터러에서 알아서 마커 찍어주니까 여기서 모양만 바꾸면 되는디

어떻게 바꾸더라 ㅎhttps://devtalk.kakao.com/t/topic/103092/5

클러스터 마커 레이아웃 변경

 

일단 여기까지 완료~