search

growing-devs / easy-to-real-estate-frontend

몰리턴 웹 서비스 고도화 프로젝트의 프론트엔드 repository
MIT License
0 stars 3 forks source link

지도, 지리 관련 API 조사 #10

Closed 05Castle closed 1 year ago

05Castle commented 1 year ago

Description

지도 API 조사하고 어떻게 사용할 지 테스트.

Todo List

기능 테스트

알아보기

주소 검색시 부동산 정보(부동산 유형, 면적)를 바로 불러올 수 있는지

05Castle commented 1 year ago

지도 표시를 위해 카카오 맵 api를 활용한다.

https://react-kakao-maps-sdk.jaeseokim.dev/

하지만, 해당 카카오 맵 api에는 주소를 받아 지도를 표시해주는 기능은 있지만 자체적으로 주소를 검색하는 기능은 없는 것으로 보인다.

정확히는 주소를 받아 좌표로 변환하는 기능이 있고, 이 좌표를 통해 지도를 표시해준다.

별도의 주소 검색 api가 필요해 보인다.

05Castle commented 1 year ago

주소 검색은 daum.Postcode 를 통해 카카오 지도 api랑 연동할 수 있다. 다만, 이 경우 UX/UI의 변경은 불가피해 보인다. 아래는 공식 문서

https://postcode.map.daum.net/guide#usage

05Castle commented 1 year ago

카카오 지도 api에 키워드로 주소를 찾고 목록을 리스트로 표시하는 기능이 있음을 확인했다. input 창에 입력한 값을 키워드로 카카오 지도 api에 전달하면 주소 검색 기능이 구현될 것으로 보인다.

다만, 이 경우에도 UX/UI 변경은 불가피하다고 여겨진다. 카카오 지도 api만으로는 부동산 유형과 면적 정보를 받아올 수 없기 때문이다.

sihyun10 commented 1 year ago

지도 위에 특정 장소를 표시하는 마커를 로드뷰에서도 마커로 표시하고, 특정 장소 로드뷰의 파노라마 ID와 시점(ViewPoint)을 설정해, 지도 위의 로드뷰 버튼을 클릭하게 되면 로드뷰가 보여지고, 로드뷰 위의 지도 버튼을 클릭하면 지도가 보여진다. (로드뷰의 파노라마ID, 시점은 Wizard를 사용)

*ex) https://apis.map.kakao.com/web/documentation/#RoadviewClient_getNearestPanoId _ 좌표로 panoid를 찾는 코드 참고

05Castle commented 1 year ago

react-daum-postcode 라이브러리로 daum.Postcode를 리액트에서 쉽게 사용 가능. react-kakao-maps-sdk 라이브러리로 kakao map API를 리액트에서 쉽게 사용 가능.

하지만 둘 다 공식 라이브러리가 아닌 것으로 보인다. 덕분에 훨씬 쉽게 기능 구현이 가능하지만, API를 사용함에 있어서 공식이 아닌 라이브러리를 사용해서 개발을 해도 될까?