customOverlay 와 map click 이벤트 함께 작동되는 이슈

지도/로컬 API
#1

지도/로컬 API에 대한 문의게시판입니다.

안녕하세요.
지도에 CustomOverLay 를 클릭하면 change 함수를 실행 후 작업을 해주는 구조입니다.

before_click

위 사진에서
제가 검정색 으로 칠해진 곳을 클릭했다면
map click event 이 작동되어 아래 사진처럼 클릭이 되는 이슈가 있었습니다.

after_click

onclick 만 실행 되는 줄 알았지만
실제로 로그 찍어보니
map click event 와 onclick event 가 같이 실행되더라구요.
제 생각에서는
customOverLay 를 클릭 하면 맵에 클릭이벤트가 실행이 되면 안될듯 한데…

조건을 줘 막을려고 해보곤 있는데
이런 현상이 자연스럽지않고 뭔가 잘못한 것 같은데

  1. customoverlay 클릭 시,
    map click event 가 실행되는 것이 자연스러운 현상인가요 ?

  2. 1번이 아니라면 어떻게 수정해야할까요 ?

코드는 아래와 같습니다

function click() {
// 아래 content 는 함수명, 변수를 단축하여 기록했습니다.
    var content = "<div class='' onclick='change(" + j + ");'><div class=''>" + addr+ "</div><div class=''>면적:</div><div class=''><button>상세보기</button></div><div class=''></div></div>";
    var customOverlay = new kakao.maps.CustomOverlay({
        map: map,
        content: content,
        position: latlng,
        xAnchor: 0.5,
        yAnchor: 1,
        zIndex: 3
    });
    customOverlay.setMap(map);
}


            kakao.maps.event.addListener(map, 'click', function (mouseEvent) {
                            click(mouseEvent['latLng']);
                    });
#2

CustomOverlay 클릭 이벤트에서 preventMap API로 지도의 이벤트를 막을 수 있습니다.
문서 참고해주세요.

#3

답변 감사합니다.

해당 부분은 확인했습니다만

답변 해주신 사이트를 참고한다면
customOverLay 의 onclick 함수에

kakao.maps.event.preventMap();

위 코드를 추가해야할텐데…

신기한 것이.
customOverLay 를 클릭했을 때,
onclick 과 map event 가 발생되는데

순서가
map event 가 먼저 발생하고 onclick 이 발생되더라구요

이런 질문을 여기다 하는게 맞는진 모르겠지만
클릭 시,
map click 이벤트가 발생되고 customOverLay 의 onclick 이벤트가 발생되는 것이 정상적 플로우인가요 ?

이미 map click event 가 이미 실행되버리는 문제가 있는데
도움을 요청드릴 수 있을까요 ?

#4

네 말씀주신 상황은 정상 동작입니다.
우선 오버레이 영역을 클릭할 때 지도로 이벤트 전파를 막으려면
CustomOverlay 에서 clickable: true 옵션을 적용해야 합니다.
clickable 옵션 적용해서 확인해주세요.

#5

답변 감사합니다.

현상이 이제서야 이해가 되네요.

PC, Mobile 환경에서
지도에 customOverLay Marker 가 많이 생기는데
이럴 경우 지도를 이동시키는데 제약이 있어,
clickable 를 뺐었는데 빼니까 지도 이벤트가 같이 발생이 되었던 것 같네요.

위에서 말한 제약으로 인해
마커를 클릭하고 드래그를 해도 지도가 이동되는 기능은 있어야할듯 한데
그렇다면
clickable 를 빼고도
지도 클릭 이벤트를 제외할 수 있을까요 ?

테스트를 해보니
대다수의 경우 맵 클릭 이벤트가 우선 실행 되어
온클릭 이벤트 를 감지하기가 어려워서요

#6

preventMap API 또는 clickable: true옵션을 적용하면 지도 동작이 멈추기 때문에
커스텀 오버레이가 클릭된 상태인지 알 수 있는 변수를 선언하고
변수값이 커스텀 오버레이가 클릭된 상태라면 지도 클릭 이벤트를 동작하지 않게 따로 구현해주셔야 합니다.

아래 코드는 참고로만 봐주세요.

// 마커 위에 커스텀오버레이를 표시합니다
var overlay = new kakao.maps.CustomOverlay({
    content: content,
    map: map,
    position: marker.getPosition(),
    xAnchor: 0.5,
    yAnchor: 1,
    zIndex: 3
});

let clicked = false;

//커스텀 오버레이 content mousedown 이벤트
wrap.onmousedown = function() {
    clicked = true;
    console.log('onmousedown');
}

//커스텀 오버레이 content click 이벤트
wrap.onclick = function() {
    console.log('click');
    clicked = false;
}

//지도 클릭 이벤트
kakao.maps.event.addListener(map, 'click', function(mouseEvent) {
    if(!clicked) {
        var latlng = mouseEvent.latLng;
        console.log('map click! ' + latlng.toString());
    }
});
1개의 좋아요
#7

답변 감사합니다

올려주신 코드샘플을 참고하여
수정 완료했습니다 ~

1개의 좋아요