[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
출발점과 도착점에 대한 마커 클릭을 만들려고 하는데
출발점 버튼과 도착점 버튼으로 각각에 이벤트를 추가시키고 삭제 시킬려고 했습니다
removeListener을 이용 해서 할려는데 Handler문제 인지 적용이 되지 않아 질문드립니다
function change_btn(event) {
var btns = document.querySelectorAll(".button");
btns.forEach(function (btn, i) {
if (event.currentTarget == btn) {
btn.classList.add("active");
// 현재 버튼이 "출발점" 버튼이고 활성 상태일 때 기능 실행
if ( btn.id === "start") {
// "출발점" 버튼이 활성 상태일 때 실행할 코드 추가
kakao.maps.event.addListener(map, 'click', function (mouseEvent){
var latlng = mouseEvent.latLng;
startMarker.setPosition(latlng);
});
}
} else {
btn.classList.remove("active");
console.log("출발점 버튼이 비활성화.");
if (btn.id === "end"){
kakao.maps.event.removeListener(map, 'click', function (mouseEvent){
var latlng = mouseEvent.latLng;
startMarker.setPosition(latlng);
});
}
}
});
이게 처음 만들었던 코드이고
이후
var clickHandler = function (mouseEvent){
var latlng = mouseEvent.latLng;
startMarker.setPosition(latlng);
}
function change_btn(event) {
var btns = document.querySelectorAll(".button");
btns.forEach(function (btn, i) {
if (event.currentTarget == btn) {
btn.classList.add("active");
// 현재 버튼이 "출발점" 버튼이고 활성 상태일 때 기능 실행
if ( btn.id === "start") {
// "출발점" 버튼이 활성 상태일 때 실행할 코드 추가
kakao.maps.event.addListener(map, 'click', clickHandler);
}
} else {
btn.classList.remove("active");
console.log("출발점 버튼이 비활성화.");
if (btn.id === "end"){
kakao.maps.event.removeListener(map, 'click', clickHandler);
}
}
});
이처럼 수정 시 이벤트 작동 자체가 안되서 핸들러 이해를 제가 잘못 한건지 확인 부탁드립니다