지도 API 구현

[jkliuh2]

카카오 API를 가져와서 지도를 그리고 필요한 데이터를 API를 통해 리턴받는다.

• 필요 지점 : post -> 거래 원하는 지역(건물단위) 위치 표시하기

Js 단계

• [x] 지도 그리기
• [x] 건물 검색을 통해 지도 이동시키기
• [x] 원하는 건물 지정하기
• [ ] post에 저장된 건물의 위치정보를 가져와서 지도로 보여주기

API

• [ ] 검색을 통해 지정한 건물에 대한 위치정보 리턴받기
• [ ] 얻어낸 건물에 대한 정보를 내가 가지고있는 주소DB과 연동시켜서 post에 저장하기
• [ ] 글 상세 페이지 : post에 저장된 건물에 대한 위치정보를 브라우저에 response로 보내주기.

계획 폐기. 아래 코멘트에서 정리

[jkliuh2]

카카오 API의 경우, 건물위치를 가지고 와서 Latlng(위도, 경도) 를 가지고 와서 주소로 변환하는 식의 메소드가 많음.

• 그래서 post의 "거래요망 위치"에는 "위도 + 경도" 가 들어가는 것이 좋을 것 같다.
• 나중에 post의 위,경도를 가져와서 카카오API를 통해 주소로 변환시키는 것이 편해보인다.

[jkliuh2]

Post에서 지도를 사용하는 부분 정리.

/post/create (글 생성)

• [x] 거래방식을 "직거래"로 선택했을 경우, 지도와 관련 input들이 표시될 수 있도록 한다.
• [x] 사용자가 거래 위치를 지도에서 마우스로 선택하면 마커가 찍히고, 해당 마커의 위도-경도를 서버로 보낼 수 있도록 한다.
• [x] 위도-경도 정보를 DB-post에 저장한다.

/article/detail-view (글 상세)

• [x] post의 정보를 가져올 때, 위도-경도 역시 함께 가져온다.
• [x] 가져온 위도-경도 좌표를 가지고 지도를 생성 + 해당 위치에 마커같은 표시를 찍어준다.(마커는 불변하도록 한다)

/post/update (글 수정)

• 상세 페이지처럼 -> 위-경도로 지점 표시
• 생성 페이지처럼 -> 마커 지정, 마커 위치 서버로 전송해서 update

[jkliuh2]

현 단계에서 봐서는, 딱히 주소DB를 사용하는 부분이 보이지 않는다. -> 굳이 사용하자면, 지번주소코드나 도로명주소 코드로 주소DB에서 "건물이름" 가져오는 정도?

[jkliuh2]

JSTL if문으로 지도 div의 존재여부를 결정해버리면 script의 map을 만드는 코드들에서 map을 그릴 장소를 찾지 못해서 오류가 나버림.

=> 그래서 일단 지도는 만들고 난 다음 script 가장 상단에 Model에서 위-경도값을 가져오면서 해당 위-경도가 NULL로 들어오면 map을 그리는 div의 클래스에 addClass("d-none")으로 숨겨서 해결함.

=> 위, 경도는 아예 이상하게 지정하면 그것도 오류가 나서, NULL로 들어올 경우 적당한 한국의 지역으로 기본 설정하게 만들었다.