마커 이미지(A와 B 2개 이미지를 하나로 붙인 C이미지)를 삽입하고, 해당 마커 클릭시
A 부분이 눌렸는지, B 부분이 눌린건지 구분이 가능한지 문의드립니다.
웹 SDK 라고 가정하고
CustomOverlay를 사용하여 그렇게 구성된 HTMLElement를 넣으면 가능합니다.
Marker객체로는 불가능합니다.
구체적으로 알수 있을까요?
웹SDK 사용하여, HTML로 작성한 페이지를 실행하는 구조입니다.
지도에서 마커클릭시, 클릭이벤트 발생하여 어느 마커가 클릭되었는지 알수 있습니다만…
하나의 마커에 이미지가 붙어 있는 경우, 어느 이미지가 클릭되었는지 알수 있는지요?
이 예제에 구현된 함수 및 선언된 변수 기준으로 설명드릴게요.
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);
이런식으로 하나의 지도 오버레이 객체에 여러개의 다른 클릭 이벤트를 걸 수 있습니다.
답변감사합니다.
아래 기능을 말씀하신 DIV Element 사용하여, 동일하게 구현할수 있을까요?
(100프로 동일하지 않더라도, 동작만 동일하게 되면 됩니다.)
지도위에 A마커가 있고, 특정 이벤트발생시 B마커가 표시합니다.
또한, 마커위에 마우스위치시 인포윈도우가 표시됩니다.
네,
말씀하신 기능들은 지도 API의 메소드를 조합하여 구현 가능합니다.
기존 마커로 구현했던 기능들을 커스텀 오버레이로 동일하게 구현 가능하다는 말씀이신지요?
기능 자체는 구현이 가능합니다. 다만 구현에 필요한 구체적인 코드는 마커를 사용할 때와는 다릅니다.
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