카카오 마커 만들기

제주도 한달살이 원룸 프로젝트를 하는데,
카카오 맵을 활용해서, 그 위에 마커로 뛰울 예정이다.

네이버에서는 이동하면서 동적으로 바뀌는 동이름을 클릭하면 그에 맞춘 마커가 나오는 방식을 사용하였고,
카카오는 모든 데이터를 받아와서 뿌리는 방식으로 설정하였다.

그래도 효율적으로 사용하려면 네이버 방식을 채택하는 것이 좋다고 판단되어 방향을 설정하였다.

---

같은 블로그 스터디 하시는 분의 내용을 참고하여서 작성하였다.

마커 추가

   for (let i = 0; i < places.length; i++) {
 const marker = addMarker(placePosition, i);
//기타 부분 생략
      }
      
      
      
function addMarker(position: kakao.maps.LatLng, idx: number) {
    const imageSrc = 'number_blue.png'; 
    const imageSize = new kakao.maps.Size(36, 37); // 마커 이미지의 크기
    const imgOptions = {};
    const markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imgOptions);
    const marker = new kakao.maps.Marker({
        position: position, // 마커의 위치
        image: markerImage,
    });

    marker.setMap(map); // 지도 위에 마커 표출
    markers.push(marker); // 배열에 생성된 마커 추가

    return marker;
}

이 분은 먼저 addMarker를 하나씩 받아서 셋팅하고 넘기는 방식을 사용하였다.
하지만 나는 배열을 받아서 그것을 일괄처리하는 방식을 원해서 배열로 받아주는 방식을 취했다.

const addMarker = (arr: Map_data[], map: kakao.maps.Map) => {
  const completeMarker: kakao.maps.CustomOverlay[] = [];
  for (let i = 0; i < arr.length; i++) {
    const latlng = new kakao.maps.LatLng(
      arr[i].coordinate.latitude,
      arr[i].coordinate.longitude
    );
    const circleInfo = new kakao.maps.CustomOverlay({
      position: latlng,
      clickable: true,
    });
    // //id단축
    const markerBox = document.createElement("button");
    markerBox.setAttribute("class", "marker_box");
    markerBox.setAttribute("value", `${arr[i].id}`);
    markerBox.onclick = function () {
      console.log(circleInfo.getPosition(), arr[i].id);
    };
    markerBox.textContent = String(arr[i].reviewCount);

    circleInfo.setContent(markerBox);
    circleInfo.setMap(map);
    completeMarker.push(circleInfo);
  }

  return completeMarker;
};

customOverlay로 커스텀을 하여서 사용하였고, 해당 이벤트도 넣어서 만들었다.
그리고 customOverlay한 결과 값을 배열로 저장하여서 삭제에 사용하는 방식을 참고하였다.
이 함수 안에서 배치를 해주기 때문에 map 값을 받아서 사용하였다.

마커 삭제

function removeMarker(markers: kakao.maps.CustomOverlay[]) {
  for (let i = 0; i < markers.length; i++) {
    markers[i].setMap(null);
  }
  markers.length = 0; //주의 수정
}

위와 같은 로직을 사용하여서 삭제하였다.
만들때 생성한 marker 배열을 이용하였고 이를 0으로 돌려주는 방식으로 배열을 비웠다.
markers = [];를 처음에 사용하였는데, 새로운 빈 배열을 할당하여서 참조를 끊는 것보다 기존의 참조된 배열을 비워주는 방식을 사용하였다.
처음에는 참조를 유지하는 것이 좋아보였는데 다시 생각해보면 큰차이는 없는 것 같다.

배치

const 일도일동: Map_circle = {
  data: [
    {
      id: 33,
      reviewCount: 2,
      coordinate: {
        latitude: 33.506188,
        longitude: 126.541041,
      },
    },
    //생략
    ]
    
const map = new kakao.maps.Map(mapContainer, mapOption);

addMarker(일도일동.data, map);

addMaker를 이용해 추가해주었다. 성공적으로 잘되었다.

눌렀을 때 현재위치를 알려주고 id값을 보여주는 이벤트를 넣었는데 잘되었다
나중에는 이 원을 클릭했을 때 데이터를 요청할 것이다.

  const markers = addMarker(일도일동.data, map);
  removeMarker(markers);

삭제도 잘되었다.
이 방식을 이용해서 마커를 그렸다가 지우는 방식을 반복할 것이다.
생각보다 잘소화되어서 만족스럽다.

---

마무리

블로그 스터디를 하게 되면서 남들이 공부한 것을 자주 읽게 되었는데 그러한 것들을 정리하여서 활용한 것이 좋았다.
전혀 모르는 사람의 블로그보다 몰입도가 좋아서 좋았던 내용들을 정리해서
담아두었는데 필요할 때 꺼내서 쓴 점이 좋았다.

그리고 dummy를 만들때도 마찬가지로 한글명으로 변수명 선언해도 괜찮다는 블로그 스터디 글을 참고하여서 작성하였는데 확실히 직관적이었다.

한글 변수명
최근에는 다양한 프로그래밍 언어와 개발 도구가 다국어를 지원하고, 유니코드(Unicode) 기반의 문자 인코딩을 사용하여 다양한 언어와 문자를 사용할 수 있게 되었습니다.

많이 용이해졌지만, 같이 코드 쓰는 사람과 코드 컨벤션을 맞추거나 동의를 구하고 사용해야한다. 하지만 이 프로젝트에서는 혼자여서 한번 사용해보았는데 직관적이어서 좋았다.

출처 :
https://jjeonge-love.tistory.com/entry/%EC%B9%B4%EC%B9%B4%EC%98%A4%EB%A7%B5-%ED%82%A4%EC%9B%8C%EB%93%9C%EB%A1%9C-%EC%9E%A5%EC%86%8C-%EA%B2%80%EC%83%89%ED%95%98%EA%B8%B0