줌 레벨 변경 시 마커 이미지 크기를 변경하고 싶습니다

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

[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
https://devtalk.kakao.com/t/faq-api/125610

안녕하세요
줌 레벨을 변경할 때마다 마커 이미지 크기를 바꾸고 싶은데요, 답변해주셨던 것들을 구글링해본 결과 changeMarkerImage 함수로 바꾸신 걸 봤습니다.

1~9까지는 default 사이즈로 두고
10~12 (최대 12) 레벨은 zoom 사이즈로 변경을 하려고 하는데요

		// 좌표와 마커이미지를 받아 마커를 생성하여 리턴하는 함수입니다
		function createMarker(position) {
			var marker = new kakao.maps.Marker({
				position : position,
				clickable : true
			// 마커를 클릭했을 때 지도의 클릭 이벤트가 발생하지 않도록 설정합니다
			});

			return marker;
		}

		// 측정소 마커를 생성하고 측정소 마커 배열에 추가하는 함수입니다
		function createStationMarkers() {

			for (var i = 0; i < stationPositions.length; i++) {

				var imageSize = new kakao.maps.Size(44, 44);
				
				// 마커이미지와 마커를 생성합니다
				var defaultImage = new kakao.maps.MarkerImage(stationImageSrc[i], imageSize),
					marker = createMarker(stationPositions[i]);
			

				stationMarkers.push(marker);
				
				var changeMarkerImage = function(){
				    
				
					    // 지도의 현재 레벨을 얻어옵니다
					    var level = map.getLevel();
					    var zoomImage = new kakao.maps.MarkerImage(stationImageSrc[i], new kakao.maps.Size(30, 30));
					    
					    if (1 <= level && level <= 9) {
					    	markerImage = defaultImage;
					    } else if (10 <= level && level <= 12) {
					        markerImage = zoomImage;
					    }

					    marker.setImage(markerImage);
				};

			
				kakao.maps.event.addListener(map, 'zoom_changed', changeMarkerImage);
				changeMarkerImage(); // initialize
				
		}
	}

		
		function setStationMarkers(map) {
			for (var i = 0; i < stationMarkers.length; i++) {
				stationMarkers[i].setMap(map);
			}
		}

image
image

근데 하나의 이미지만 엑박이 뜨고 변경되지 않습니다… 도저히 뭐가 틀렸는 지 모르겠어서 질문 남깁니다…
감사합니다

2

아래 코드는 참고용으로 봐주시고 로직에 맞게 수정해주세요.
그리고 엑박은 이미지를 찾지 못해서 404 오류가 난걸로 보입니다.
stationImageSrc 데이터가 올바른지 확인해주세요.

//현재 코드는 지도 이벤트가 들어올 때 변경할 마커를 알 수 없습니다.
//지도 레벨 이벤트는 한번만 등록해주시고 stationMarkers 배열을 돌면서 마커 이미지를 변경해주세요.
kakao.maps.event.addListener(map, 'zoom_changed', ()=> {
    stationMarkers.forEach((marke, i) => {
        changeMarkerImage(marker, i);
    })
});

//마커 이미지를 설정하는 함수도 반복문 밖에 선언해서 zoom_changed 이벤트에서 호출할 수 있게 수정해주시고
//createStationMarkers for문에서도 해당 함수를 호출해서 마커 이미지를 셋팅해주세요.
function changeMarkerImage(marker, i) {
    //TODO: 이미지 설정
}

// 측정소 마커를 생성하고 측정소 마커 배열에 추가하는 함수입니다
function createStationMarkers() {
    for (var i = 0; i < stationPositions.length; i++) {
        marker = createMarker(stationPositions[i]);
        stationMarkers.push(marker);
        changeMarkerImage(marker); // initialize
    }
}