Kakao Map Api With 애완동물병원 #10

애완동물병원을 카카오 맵의 마커로 표시하는 기능과 사용자 위치에 가까운 최대 5개 병원을 보여주는 기능을 완성하였습니다.

 

해당 기능을 만들때 고민했던 과정을 간단하게 요약해보려 합니다.

 

기능 구현까지 겪은 과정들

 

1. 공공데이터 포털의 애완동물병원 데이터 가져오기
2. 가져온 데이터 kakao map에서 사용하는 경위도 좌표계 포멧으로 변경하기 (with proj4j and coord2regioncode)
3. 변경한 좌표계 위치를 실제 병원위치로 조정하기
4. 병원 위치 데이터 마커로 표시하기
5. 마커와 클러스터로 표시하기
6. navigator와 geolocation으로 사용자 위치 파악하기
7. 파악한 사용자 위치와 지도 내부 위치 파악하기
8. 사용자 위치와 지도 위치로 부터 근처의 병원 표시하기 (with https)

진행하며 개선한 사항

지도에 매번 전체 위치데이터 출력 -> 처음 로딩시 한번 가져와 성능 향상

병원 상세 링크 새창으로 띄워 사용자 편의성 향상

 

개선사항

병원 페이지에 들어갈때마다 데이터 로딩 -> 서버 로딩시 1회 데이터 가져온 후 재사용

클러스터 숫자 -> 시/도/군/구로 편의성 향상

UI 개선