카카오 맵 API를 이용하여 마커와 텍스트 그려주기

해당 이미지에는 경로 이외에도 텍스트를 통하여 순서를 표기하여주었는데

순서 표기에 대한 부분은 해당 글에서는 다음 글에서 다루도록 하겠다.

일단 해당 기능을 구현하기에 앞서서 맛집과 관광지 카드들이 좌표를 들고있어야 해당 기능을 구현할수 있다.

맛집과 관광지에 대한 게시물은 유저가 작성하기 때문에 어떻게해야할까 라는 생각을하였고 

게시물을 등록할때에 좌표를 찍어주면 되겠다 라는 생각을하였고 유저의 불편함을 최대한 없에기 위하여

아래의 영상과 같은 방법을 생각하여 구현해두었다.

 

게시물을 작성하는 게시판에 들어간 모습은 아니지만 위의 영상과 같은 방법으로 유저에게 좌표를 입력받을 생각이다.

카카오 맵API에서 제공해주는 검색기능을 통하여 자신이 원하는 관광지 또는 맛집을 검색후 마커를

클릭하여주면 위도,경도값이 자동으로 입력되게해두었다.

 

검색기능은 카카오 맵 API를 제공해주는 사이트를 참조하는것이 가장 좋다.

주석처리도 잘되어있고 복사해서 붙인후에 API만 넣어주면 잘 작동되는데 이 글에서 참고할것은

위의 이미지와같이 받아온 값들을 잘 분리해 내서 사용하는 방법을 위주로 참고하는게 좋다.

position에 들어있는 경도,위도의 값을 Object.values() 를 사용하여 분리해주고

latitude.innerHTML, longitude.innerHTML을 통하여 값을 화면상에 위도 경도의 값을 띄워주었다.

 

https://apis.map.kakao.com/web/sample/keywordList/

 

# 카드가 왼쪽으로 넘어갈때에 텍스트마커,이미지마커를 띄워주는 방법.

imageSrc부분에 내가 원하는 이미지의 주소를 넣어준다면 원하는 이미지를 띄워줄수있고

imageSize를 통하여 이미지의 크기를 조절하고

imageOption을 조절하면 좌표의 위치와의 간격을 조절할 수 있다.

값을 원하는대로 조절한 후에

 var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption);

마커의 이미지 정보를 가지고있는 마커이미지를 생성하여준다.

마커의 이미지 정보를 가지고있는 마커의 이미지를 생성하였다면 맵에 띄워주면되는데

맵에 띄워줄때에는 어느곳에 띄워줄지에 대한 좌표가 필요하다.

좌표값을 얻기위해 addCard 펑션의 매개변수로 value를 받아왔고 텍스트마커에 맛집 또는 관광지의

이름을 띄워주기 위해서 해당 카드의 title(제목)값을 매개변수로 받았다.

 

addCard 펑션은 카드를 생성할때에 실행이되는데 다음 이미지와같이

오른쪽에 있는 카드들에 '+" 버튼을 클릭하여 왼쪽으로 넘어갈때에 실행된다.

왼쪽(전), 오른쪽(후)

위의 이미지에 코드를 보면 const btn_plus = document.createElement("div");

가 보일것이다 btn_plus에 onClick을 넣어 "+" 버튼이 클릭될시에 안에있는 펑션들이 실행이 되는데

id값으로는 해당 카드의 제목값을 넣어주었고 value값으로는 해당 카드가 가지고있는 위도,경도의 값을 "/"를 더해

매개변수로 전해주었다(딜리트에 대한 부분은 좀 더 나중에 설명)

 

addCard() 펑션을 보면 매개변수로 받은 value를 .split을 통하여 배열에 담아준것을 볼수있는데 이 이유가

바로 이곳에서 "/"를 기준으로 담아주었기 때문에 분리를 해주어야 했다.

 

마커를 생성할 좌표값(markerPosition)과 마커의 이미지를 marker에 담아준다.

 

다음으로는 마커위에 띄워줄 텍스트를 생성해야하는데

위의 이미지와 같은 방법으로 텍스트를 생성하여준다.

카드를 추가할때마다 맵에 띄워야할 카드의 이름이 다르기때문에

매개변수로 받아온 cardTitle값을 content 에 넣어준다.

content는 돌하르방 위에 나올 텍스트를 구성하는 HTML코드를 담아두었다.

 

위에 positions에 position 값을 푸쉬하여주는 이유는 텍스트 마커안에 순서를 넣어주기 위함인데

조금 글이 길어질수 있으니 다른 글에서 설명하겠다.

 

다음 addText 펑션에 매개변수로 position(좌표값)과 content 값을 전해주면

addText펑션에서 customOverlay를 생성하여준다.

참고오 addText펑션은 마커이미지 위의 텍스트를 생성하여주는 펑션이다

위치값과 띄우고싶은 콘탠츠 즉, 텍스트박스의 모양 및 이미지를 넣어주면된다.

 

여기서 ovarlays배열에 담아주는 이유는 나중에 ovarlays[0].setMap(null) 이런식으로 사용하여

맵에 그려진 텍스트를 지우기 위해 담아두었다.

 

다음으로는 이미지를 띄워주어야하는데 marker에는 아래의 이미지와 같이 좌표와

이미지의 정보가 들어있다. 위의 이미지처럼 좌표값과 이미지값을 가진 marker에 

.setMap(map)을 해준다면 지도위에 마커가 표시된다.

참고로 markers 배열에 marker값을 담아주는 이유는 ovarlays와 같이

마커를 지워야할때에 사용하기 위함이다.

 

마지막으로는 비동기 방식(ajax)으로 데이터를 처리해주는데

xhttp객체에 정보들을 담아서 send()메서드로 데이터를 요청하는데

여기서 컨트롤러에 넘겨주는 값은 cardTitle을 넘겨주고 GET방식으로 주소에 포함하여 넘겨주는데

컨트롤러에서는 위와같은 방식으로 title값을 받아 title값으로 디비를 조회하여

title과 같은 title을 가진 값을 가져와 return 하여준다.

참고로 맛집테이블과 관광지 테이블은 따로 구성되어있어서 join하여 사용하였다.

 

사실 이부분에서의 문제점이 있다면 타이틀 값이 중복될수 있다는것인데 이 부분을 title값으로 하는것이 아닌

각 테이블에 기본키로 값을준것을 가져와 그걸 토대로 조회하였어야했다.

(원래는 title이 기본키였다 게시물을 등록하는데에 title은 중복이 안되게 하려하였는데 이름이 같은 맛집 또는 광관지가 있을수 있음으로 기본키로 id값을 따로 주고 title은 기본키가 아니게되었다..)

현재 프로젝트가 얼마 안남은 시점에서 바꾸기에는 건드려야 할 곳이 몇군데 있음으로

나중에 코드 리펙토링 할때에 이 부분에 대해서 수정해야겠다.

 

마지막으로는 RestController에서 디비를 조회하여 가져온 값들을  json형식으로 jsp에서 받아

addToListLeft(JSON.parse(e.target.responseText));

addToListLeft(); 의 매개변수로 가져온 값들을 넣어주고 

위의 이미지와같이 매개변수로 받아온 값에서 필요한 정보를 원하는 위치에 넣어 카드를 구성하여준다.

 

 

얼른 실력을 더 길러 보기좋은 코드를 짜고싶다

블로그를 쓰면서 다시 코드를 보는데 필요없는 부분도 있었고 수정해야할 부분도 보인다.

역시 블로그에 장점은 내가 쓴 코드를 다시보며 공부하는것도 있고

내가 짯지만 다시 돌아보니 이게 왜 필요하지 어떻게 했으면 더 좋았겠네

라는 부분과 실수한 부분이 다시 보인다.

 

이번글에서 설명하지 못했었던 코드인

커스텀오버레이와 좌표값을 가진 마커를 배열에 담아 저장해둔 이유를

다음 글에서 포스팅 해보도록 하겠다.

이유를 간략하게 정리해보자면

왼쪽에 넘어가 x버튼을 눌러 카드가 사라질때에 필요하기때문에 담아두었다.