안녕하십니까. 마커 문의드립니다

카카오맵 API (지도/로컬)
1

마커 이미지(A와 B 2개 이미지를 하나로 붙인 C이미지)를 삽입하고, 해당 마커 클릭시
A 부분이 눌렸는지, B 부분이 눌린건지 구분이 가능한지 문의드립니다.

2

웹 SDK 라고 가정하고
CustomOverlay를 사용하여 그렇게 구성된 HTMLElement를 넣으면 가능합니다.
Marker객체로는 불가능합니다.

3

구체적으로 알수 있을까요?
웹SDK 사용하여, HTML로 작성한 페이지를 실행하는 구조입니다.

지도에서 마커클릭시, 클릭이벤트 발생하여 어느 마커가 클릭되었는지 알수 있습니다만…
하나의 마커에 이미지가 붙어 있는 경우, 어느 이미지가 클릭되었는지 알수 있는지요?

4

이 예제에 구현된 함수 및 선언된 변수 기준으로 설명드릴게요.

content 라는 DIV Element 가 있습니다.
이 엘리먼트 내부에 원하는 이미지 두 개를 넣으시고

var img1 = document.createElement('img');
img1.src = 'xxx';
content.appendChild(img1);

var img2 = document.createElement('img');
img2.src = 'yyy';
content.appendChild(img2);

각각의 이미지에 원하는 클릭 이벤트를 걸어주세요.

addEventHandle(img1, 'click', handler1);
addEventHandle(img2, 'click', handler2);

이런식으로 하나의 지도 오버레이 객체에 여러개의 다른 클릭 이벤트를 걸 수 있습니다.

5

답변감사합니다.

아래 기능을 말씀하신 DIV Element 사용하여, 동일하게 구현할수 있을까요?
(100프로 동일하지 않더라도, 동작만 동일하게 되면 됩니다.)

지도위에 A마커가 있고, 특정 이벤트발생시 B마커가 표시합니다.
또한, 마커위에 마우스위치시 인포윈도우가 표시됩니다.

6

네,
말씀하신 기능들은 지도 API의 메소드를 조합하여 구현 가능합니다.

7

기존 마커로 구현했던 기능들을 커스텀 오버레이로 동일하게 구현 가능하다는 말씀이신지요?

8

기능 자체는 구현이 가능합니다. 다만 구현에 필요한 구체적인 코드는 마커를 사용할 때와는 다릅니다.

daum.maps.addListener(marker, 'click', handler);

위 처럼 기존 마커에서 사용해왔던 이벤트 리스너는 CustomOverlay 에서 동작하지 않습니다.

필요한 이벤트들은 content 내부에 넣을 HTML Element(EventTarget)들에게 각각 Native DOM 이벤트를 걸어주셔야 합니다.

// Native Dom Event Listener
EventTarget.addEventListener('click', handler);

// jQuery 사용시
$(EventTarget).on('click', handler);

DOM 이벤트를 사용하는것이니 만큼 이벤트 타입들도 HTML 스펙에서 지원되는 것들을 사용할 수 있습니다.
https://en.wikipedia.org/wiki/DOM_events#Common_events