반경 드로잉

[parkblo]

📄 이슈 개요

네이버 지도 위에 원을 설정하는 기능을 구현한다.

📑 상세 내용

네이버 지도의 드로잉툴을 사용하면.. 우리가 원하는 ui대로 동작 안할듯

• 1. 반경 드로잉 모드 진입
• 2. 처음 클릭한 부분에 작은 원 표시
• 3. 해당 좌표를 중점으로 최대 반경의 원 표시 (점선 회색 원)
• 4. 마우스의 이동에 따라서 현재 그리고 있는 원 표시.
• 5. 마우스가 최대 반경의 원에서 벗어난 경우 그려지지 않고, 반영도 되지 않음.
• 6. 마우스의 이동에 따라서 마우스 커서의 우측 하단에 반경에 대한 정보 컴포넌트 표시
• 7. 두번째 클릭이 끝나면 그려지고 있는 원의 반경은 고정됨
• 8. 필요에 따라서 우측 하단에 반경에 대한 정보 컴포넌트로 크기를 조절할 수 있음.
• 9. submit 기능의 버튼이 추가적으로 필요하다. 해당 버튼을 눌러서 최종적인 표시 완료

✔️ 체크리스트

• [x] 드로잉 모드 진입 버튼 생성
• [x] 드로잉 중: 1st클릭=중심점 설정, 2nd클릭=반경 설정
• [x] 드로잉 중: 현재 마우스 위치에 따라 원 갱신
• [x] 드로잉 중: 원 우측 하단에 원 정보 컴포넌트 표시
• [x] 드로잉 완료: 원 크기 고정 및 컴포넌트 위치 고정
• [ ] 원 정보 컴포넌트의 변경값에 따라 원의 크기 변경 기능
• [x] 원 정보 컴포넌트에 submit 버튼 추가
• [ ] 예외 처리: 최대 반경값을 벗어났을 경우

📎 참고자료

• 클릭한 지점으로 마커 옮기기
• naver.maps.Circle