본문 바로가기
Clozet [프로젝트]

[Clozet] 지도 검색 범위 지정하기

by ungyuun 2023. 11. 11.

당근 마켓의 지도 검색범위 설정을 구현해 보려고 한다. 범위를 설정해서, 해당 범위내 있는 상품들만 조회할 수 있게 하려고 한다. 

 

먼저 플로우를 생각해봤다. 

1. 네이버의 GeoLocation을 사용해서 본인의 ip를 통해 경도와 위도를 반환한다. 반환한 좌표를 통해 지도에 본인 위치를 표시한다. 

2. input 태그의 range를 이용하여 범위를 지정한다. 범위는 1 ~ 5km로 설정할 수있다.

3. 범위에 따라 네이버 지도에 원 크기가 달라진다. 해당 범위내 행정복지센터의 좌표가 있으면, 해당 동 이름을 카운트해 

    "(본인의 행정동)외 14개동 조회" 라고 표시한다.

4. db에 [회원ID, 위도, 경도, 행정동 명, 검색범위] 를 저장시킨다.