카카오 지도 연동하기

 

❒ Description

---

어드민 개발 과정에서 카카오 지도를 연동해야 하는 요구사항이 있었다.

구체적인 요구사항은 다음과 같았다.

 

 ▫︎  스탬프 투어의 대표 위치를 지도에서 선택할 수 있어야 한다.

 ▫︎  지도 위의 마커는 항상 정가운데 고정되어 있어야 한다.

 ▫︎  키워드를 통해서 검색할 수 있는 기능이 있어야 한다. 

 ▫︎  검색한 결과는 좌측에 목록으로 노출되어야 한다.

 ▫︎  검색 결과 중 하나의 요소 선택시 해당 위치를 지도 중앙에 위치 시켜야 한다. 

 ▫︎  지도를 드래그 했을 때 드래그가 끝나는 지점의 위치 정보를 표시해야 한다.

 

 

❒ Troubles

---

Trouble 1.  항상 마커를 지도 중앙에 띄우는 문제

카카오 맵에서 제공해주는 API 중 지도 이동시키기, 마커 생성하기를 사용해서 지도를 이동할 때 마다

지도 중앙에 마커를 찍어주는 방향으로 구현하려고 했다. 하지만 이 방법은 위 요구사항 중 `지도 위의

마커는 항상 정가운데 고정되어 있어야 한다.` 를 위반하는 방식이었다. 

 

Trouble 2.  드래그 이벤트 시 가장 최근 마커가 지워지지 않는 현상

드래그가 끝나는 지점에 마커를 찍어주려고 했다. 그래서 marker를 useState를 통해서 관리 해주려 했다.

분명 useState를 통해서 marker의 상태를 관리해줬음에도 불구하고, 이전 마커는 사라지지 않고 그대로

유지되었다.

이슈 영상

 

 

❒ Trouble Shooting

---

Trouble Shooting 1. Overlay 방식으로 마커를 그리기

카카오 맵 API를 통해서는 지속적으로 지도 중앙에 마커를 위치 시키기에 한계가 있었다. 따라서 지도위에 마커를 띄우는

overlay 방식으로 해당 이슈를 해결할 수 있었다. overlay 방법은 간단한 css 조작을 통해 작업하였다.

#centerMarker {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 35px;
  height: 35px;
  background: url(image_url) no-repeat;
  background-size: cover;
  margin: -35px 0 0 -16px;
  z-index: 10;
}

 

 

Trouble Shooting 2. 마커를 찍어주는 것 처럼 보이게 하기.

이 trouble은 `Trouble Shooting 1`에서 overlay로 마커를 보여주는 해결 방법으로 인해 자동으로 해결된 문제다.

왜냐하면 모든 마커에 대한 권한을 overlay가 가져갔기 때문에 더 이상 마커 생성하기를 통해서 마커를 그려주지

않아도 되기 때문이다.