현재 구글맵에서 사용하는 마커들은 마커 클릭 순서를 옆에 숫자로 표현해주고 있는데요
카카오맵에서 이렇게 마커옆에 number를 넣어주려면 어떻게 하는게 좋을지 모르겠어서 질문드립니다. 커스텀오버레이로 진행을 해야하는건지 marker로만도 가능한건지… 그리고 저 숫자도 매번 지웠다 다시 그려줘야되는건지 궁금합니다.
마커와 숫자를 표시할 커스텀 오버레이를 생성해주세요.
마커와 커스텀 오버레이가 1:1 매칭 관계라면
마커가 지도에서 삭제될 때 커스텀 오버레이도 같이 삭제되도록 구현해주면 될 것 같습니다.
아래 여러 개 마커와 인포윈도우 생성 예제 참고해주시고
인포윈도우 대신 커스텀 오버레이로 생성해주세요.
https://apis.map.kakao.com/web/sample/multipleMarkerEvent/
https://apis.map.kakao.com/web/documentation/#CustomOverlay
우선 답변 정말 감사합니다. 제가 사용하는 것은 배송 배차에서 사용을 하는데요. 사용자가 배차수정버튼을 눌러 순서대로 마커를 클릭하면 그 클릭 순서대로 옆에 숫자가 나오는 방식입니다. 마커와 오버레이가 1대 1 매칭이라고도 할 수 있지만, 오버레이 숫자는 유동적으로 바뀌게 됩니다. 마커를 눌러 1번이 나왔다가 다시 한번 누르면 1이 사라져야되는 형식인데 현재 오버레이 위에 계속 덮혀쓰기가 되고, 오버레이가 전부 지워지게되는데 어떤 방법을 사용하면 좋을지 조언을 구하고 싶습니다. 읽어주셔서 감사합니다.
마커 클릭 이벤트를 등록해서 커스텀 오버레이를 show/hide로 동작되게 구현해주세요.
overlay.setMap(); API로 커스텀 오버레이를 지도에 보여주고 삭제할 수 있습니다.
그리고 숫자가 유동적으로 바뀌면 마커 클릭으로 오버레이가 보일 때
마커에 맞는 숫자를 가져와서 overlay.setContent API를 이용해 콘텐츠를 재설정할 수 있습니다.
https://apis.map.kakao.com/web/documentation/#Marker_click
https://apis.map.kakao.com/web/documentation/#CustomOverlay_setMap
https://apis.map.kakao.com/web/documentation/#CustomOverlay_setContent
답변 정말 감사드립니다. 그런데도 정답을 못찾고 있어서 이렇게 다시한번 문의 드립니다ㅠㅠ 죄송합니다.
현재 저희가 사용하고 있는 핀에 배차 순서 지정하는 기능인데… 이렇게 진행하려면 어떤 방식으로 접근을 하면 좋을지 모르겠어서 질문드립니다ㅠㅠ 어느 시점에 오버레이를 지우고 다시 그려줘야되는건지…
먼저, 클릭한 마커와 오버레이를 관리할 수 있는 배열을 생성해주세요.
아래 답변에 첨부된 코드와 같이 마커를 생성할 때
map속성을 적용하지 않은 오버레이 생성 및 마커 클릭 이벤트를 등록해주세요.
클릭 이벤트에서 클릭한 마커가 배열에 포함되었는지 확인해서
포함되어 있지 않다면 각 배열에 마커와 오버레이를 담아주고
오버레이의 content를 설정할 때 배열의 length 값으로 숫자를 설정해주세요.
그리고 마커가 포함되었다면 각 배열에서 마커와 오버레이 정보를 삭제해주고
오버레이 배열을 반복문을 돌면서 서 다시 content 설정해주세요.
이때 숫자는 index+1 값으로 보이게 설정해주세요.