다만 DOM에 클래스를 부여하고, 이 클래스로 DOM을 잡아서 이벤트 트리거를 하실 계획으로 보이는데,
이렇게 하는 것보다,
우측에 리스트를 그리실텐데,
이 리스트를 그리기 위한 데이터 리스트를 배열이나 Map으로 만드셔서 이용하시는게 어떠실까 합니다.
각 리스트 아이템은, 각 행에서 필요한 정보들을 스크립트 자체에서 데이터모델로써 가지고 있게 되는 것이죠.
여기서 "행에서 필요한 정보"들 중에 마커들을 넣어두고 관리를 하면 쉬우실 것 같습니다.
트리거를 이용하여 이벤트를 발생시키면 되긴합니다.
지도 초기 레벨이 높아 확대되어 클릭한 리스트에 해당하는 마커가 현재 지도영역에서 보이지 않으면
마커, 커스텀오버레이등 이벤트 등록이 되지않는것같습니다. Cannot read properties of null (reading ‘addEventListener’)
panTo를 이용해 마커위치로 이동 시킨 후 이벤트를 동작 시키면 되긴하나 이것 또한 타이밍 문제가 발생합니다.
panTo 이후 settimeout 100ms정도 잡고 트리거를 발생시켰을 땐 되게 빠르게 마커 이동을 시키지 않는 이상 잘 작동합니다.
혹시 panTo로 해당 마커 위치로 좌표이동 완료했다는 콜백을 받을 수 있는 방법이 있을까요?
네.
현재 Kakao 지도 Web API Documentation
Map객체에서 트리깅 하는 이벤트는 위 다큐멘테이션 페이지에 있는게 전부입니다.
비슷한 기능으로는 center_changed, idle 과 같은 이벤트와, 리스트 행 영역을 클릭했다는 정보를 통해서 비스무리하게 구현을 해볼 수는 있겠으나, panto, panby 와 같은 함수의 끝나는 시점을 알려주는 이벤트는 없습니다.
지도 API는 화면에 보이지 않은 상태이고 일정 영역 바운더리를 벗어나면 display:none을 시키고 있습니다.
이렇게 하지 않으면, 지도의 작은 움직임에, 보이지도 않는 마커들이 모두 업데이트가 돌 수 있기에 불필요한 성능하락을 막기 위함인데요;
보이지 않는 상황일때는 해당 마커쪽으로 이동시키는 로직과, 마커에 걸려있는 이벤트 핸들러 자체를 별도로 실행시키는게 어떠실까 합니다. 아니면 위 이벤트를 이용해서 구현을 해보시는 것도 방법일 것 같습니다.