지도 기능
지도는 따로 컨트롤러를 만들지 않고 homeController에서 컨트롤 가능하도록
localhost:8081/usr/home/map으로 들어가게 되면 지도 페이지가 나오도록
상단 메뉴 부분
웹페이지 모습
브라우저에서는 메뉴의 지도를 누르면 이동됩니다.
homeController 에서 articleService를 @autoWired를 통해 연결
모든 게시물의 제목을 순서대로 가져온다
같은 방식으로 게시물의 모든 주소를 순서대로 가져온다
그 후 "/" 를 통해서 순서대로 제목과 주소를 합쳐준다 -> 이는 나중에 split을 사용해서 분리하려고
이렇게 만들어진 titleAddress를 model을 통해서 페이지에 전달
지도 활용 예시
내 프로젝트에서 생성된 게시글의 제목과 주소를 기반으로 지도에 마커를 생성
마커를 누르게 되면 위와 같이 여행지와 주소가 보이게 된다
길찾기 버튼을 누르게 되면 두지점의 경로를 보여주게 된다 (수정 예정)
지도 생성과 마커 및 인포윈도우 생성 방법
카카오 맵 api 사용 방법
https://velog.io/@tama51/%EC%B9%B4%EC%B9%B4%EC%98%A4-api-%EC%82%AC%EC%9A%A9-%EB%B0%A9%EB%B2%95
지도를 생성하는 방법은 kakaoDevelopers에서 제공해주는 방법으로 생성
지도 생성 방법
https://apis.map.kakao.com/web/sample/basicMap/
마커 생성 방법
https://apis.map.kakao.com/web/sample/basicMarker/
마커에 인포윈도우 생성 방법
https://apis.map.kakao.com/web/sample/markerWithInfoWindow/
kakaoMap에 있는 기능중 마커와 인포윈도우 기능 사용
jstl 태그를 사용
반복문을 통해서 titleAddress를 다시 title과 address로 분리
카카오서비스의 지오코딩으로 주소를 통해서 좌표를 얻어오게 된다
(주소 정보는 글을 작성할때 다음 우편번호주소 서비스를 활용했기에 없는 주소는
입력이 불가)
가져온 주소를 통해서 마커와 정보창을 띄울수 있게 된다 초록색 박스
정보창의 크기와 모양을 간단한 html과 css로 생성 주황색 박스
문제점 및 개선사항
길찾기를 구현 하고 싶었는데 직선 거리만을 표시하게 된다
이는 카카오 지도 api가 아닌 카카오 내비 api를 사용했어야 했다
카카오 내비 api가 요구하는 파라미터에는 x좌표 y좌표가 필수이다
하지만 무료 api중에서 x좌표와 y좌표를 구해주는 api를 잘 찾지 못해서 완성하지 못했다.
