[뻐정] 프로젝트 개선사항

1. Main 화면

기존에는 사용자가 소재지와 정류장명을 select box에서 입력히면(노선명은 생략 가능), 해당 정류장의 정보를 POST-GET 방식으로 넘겨주어 detail 페이지를 띄웠다. 하지만, 해당 정류장의 소재지를 모르는 경우가 있을 수 있고, 지도에서 직접 선택하는 것이 사용자 편의적인 측면에서 더 좋을 것이라고 생각했다.

[기존화면]

따라서 main 화면을 다음과 같이 변경하였다. 기존의 셀렉트 박스로 검색하는 기능은 ‘직접 검색’ 섹션을 따로 빼서 분리해주었으며, 기본적으로 지도에서 사용자가 직접 정류장을 선택할 수 있게 하였다.

[변경화면]

1-1) 지도 검색

조회하고자 하는 버스를 검색하면, 해당 버스가 지나는 정류장을 마커로 표시한다. 또한, 검색결과를 좌측 상단에 리스트로 표현하였으며, 클릭 이벤트를 줘서 detail 페이지로 넘어갈 수 있게 하였다.

사용 기술

KakaoMaps API를 메인 기술로 사용하였으며, 아래 Reference를 참고하였다.

• Link

  https://apis.map.kakao.com/

• Reference

  지도에 사용자 컨트롤 올리기

  여러개 마커 표시하기

  여러개 마커 제어하기

  여러개 마커에 이벤트 등록하기1

  여러개 마커에 이벤트 등록하기2

  키워드로 장소 검색

위 Reference들을 참고하여 kakaomap.css와 kakaomap.js를 만들어 main html에 불러와서 사용하였다.

1-2) 직접 검색

직접 검색 섹션에서는, 사용자가 직접 정류장명을 입력하거나, 셀렉트 박스에서 정류장을 고를 수 있게 하였다.

사용 기술

3번 텍스트 상자의 값을 받아와서, 만약 값이 비어있지 않으면 1,2번 셀렉트 박스의 display를 false로 바꾸고 그렇지 않으면 true로 바꾸어주는 js 함수를 작성하였다. 3번 텍스트 상자 onchage 옵션에 해당 js 함수를 넣어주어, 값이 바뀔 때마다 동작하도록 하였다. js 문법은 아직 익숙하지가 않아서, 쉬운 기능인데도 한참 헤맸던 기억이 난다.