[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
https://devtalk.kakao.com/t/faq-api/125610
nuxtjs사용
마커 생성 후 클릭이벤트 추가
마커를 생성할 때 dom이 생성되어 그려지게되던데 해당 dom에 class나 id를 추가할 수 있나요?
마커 리스트에 대한 정보를 따로 우측에 테이블형식으로 관리한다고할 때, 테이블의 행을 클릭했을 때 지도의 마커에 클릭이벤트를 발생시키고싶은데 해당 마커의 dom에 접근할 수 있는 방법이 궁금합니다.
지도 외부에서 클릭하려고합니다
var marker = new kakao.maps.Marker({
map: this.map, // 마커를 표시할 지도
position: new kakao.maps.LatLng(item.lat, item.lng), // 마커의 위치
clickable: true,
image: this.fnSetImage(require(`@/assets/img/ico_${item.image}.png`)),
zIndex:2,
});
// tempMarker['key'+i] = {marker : marker}
kakao.maps.event.addListener(marker, 'click', this.fnClickMarker(this.map, i));
...
...
fnClickMarker(map, i){
let local = this
const item = this.tMarkerList[i].info
const openInfoWindow = function() {
// 열려 있던 오버레이 닫기
local.fnCloseMarkerInfoOverlay()
// 오버레이 열기
local.tMarkerList[i].overlay.setMap(map)
// 오버레이 z-index 설정
local.tMarkerList[i].overlay.setZIndex(999)
}}
일반적인 마커보다, CustomOverlay를 이용해서, Marker에서 제공하는 마커이미지와 똑같은 이미지를 넣으면 커스텀 DOM을 구성하면서 마커와 똑같이 지도에 표출하게 할 수도 있습니다.
https://apis.map.kakao.com/web/documentation/#CustomOverlay
다큐멘테이션 참고해 주시기 바라며, 샘플링크도 들어가 있으니 각 샘플을 참고하시면 됩니다.
다만 DOM에 클래스를 부여하고, 이 클래스로 DOM을 잡아서 이벤트 트리거를 하실 계획으로 보이는데,
이렇게 하는 것보다,
우측에 리스트를 그리실텐데,
이 리스트를 그리기 위한 데이터 리스트를 배열이나 Map으로 만드셔서 이용하시는게 어떠실까 합니다.
각 리스트 아이템은, 각 행에서 필요한 정보들을 스크립트 자체에서 데이터모델로써 가지고 있게 되는 것이죠.
여기서 "행에서 필요한 정보"들 중에 마커들을 넣어두고 관리를 하면 쉬우실 것 같습니다.
그리고 행을 클릭할때, 그 행에 맞는 데이터값을 데이터모델에서 꺼내와서, 그 안에 있는 마커에
trigger 함수를 통해 이벤트를 날려주면, 마커에 할당된 이벤트 핸들러가 실행이 될 것입니다.
https://apis.map.kakao.com/web/documentation/#event_trigger
요렇게 이용해 보시는게 어떠실까 합니다.
트리거를 이용하여 이벤트를 발생시키면 되긴합니다.
지도 초기 레벨이 높아 확대되어 클릭한 리스트에 해당하는 마커가 현재 지도영역에서 보이지 않으면
마커, 커스텀오버레이등 이벤트 등록이 되지않는것같습니다. 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을 시키고 있습니다.
이렇게 하지 않으면, 지도의 작은 움직임에, 보이지도 않는 마커들이 모두 업데이트가 돌 수 있기에 불필요한 성능하락을 막기 위함인데요;
보이지 않는 상황일때는 해당 마커쪽으로 이동시키는 로직과, 마커에 걸려있는 이벤트 핸들러 자체를 별도로 실행시키는게 어떠실까 합니다. 아니면 위 이벤트를 이용해서 구현을 해보시는 것도 방법일 것 같습니다.
