지도 API 마커 이미지 getImage() 같은 객체인데 비교했을시 false가 나옵니다

지도/로컬 API
#1

체크박스를 이용하여 기본 마커 이미지(1)에서 marker.setImage() 함수를 이용해 새로운 마커 이미지(2)로 변환을 하고

그 새 이미지의 마커(2)를 우클릭하면 또 다른 이미지(3)로 marker.setImage() 함수를 이용해 바뀌는 이벤트를 생성하였습니다.

그런데 체크박스 이벤트에서 여러개의 마커들을 동시에 새로운 마커(2)들로 바꿀때는 문제가 없는데

우클릭으로 다른 새 마커(3)로 바꿀때는 여러개중에 하나만 바뀌질 않습니다. 다른 상황(다른좌표들)에서 마커 이미
지 변환은 잘 작동합니다.

조건문은 marker.getImage()함수를 이용하여 (2)번의 이미지 일땐 (3)번으로 바뀌는건데 한개의 마커만 인스턴스 비교시 false가 나옵니다

이미 모든 마커를 같은 이미지객체로 (2)번으로 바뀐상태인데 getImage()함수를 사용하면 한개의 마커만 인스턴스가 다르다고 나옵니다

대체 왜 같은 마커이미지를 setImage() 사용하여 이미지를 바꾸고 getImage() 함수 호출했을때 다르다고 나오는지 궁금합니다

도저히 이해가 안되서 질문드립니다

#2

객체 비교를 어떻게 하고 계시나요?

Object 객체 비교에서 strict 비교 연산자만으로는 객체가 완전히 동일한지 알 수 없습니다.

Obejct.equal 로직을 구현하셔서 속성 값까지 비교를 해주세요.
아니면 이미지 url로만 비교를 해서 어디서 false가 나는지 디버깅이 필요해 보입니다.

#3

확실한 것은 API의 Marker 객체는
MarkerImage를 set한 그대로 getter에서 반환한다는 것입니다.
이미 해보셨을 것 같지만, 그리고 단일 테스트가 정상적으로 나와서 코드를 작성하신 것이겠지만
아래 코드로 다시 확인해 보시죠.

var mapContainer = document.getElementById('map');
var mapOption = { 
    center: new kakao.maps.LatLng(37.54699, 127.09598),
    level: 4
};
var map = new kakao.maps.Map(mapContainer, mapOption);

var imageSrc = 'http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_red.png';
var imageSize = new kakao.maps.Size(64, 69);
var imageOption = { offset: new kakao.maps.Point(27, 69) };
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption);
var markerPosition = new kakao.maps.LatLng(37.54699, 127.09598);
var marker = new kakao.maps.Marker({
    position: markerPosition, 
    map: map
});
marker.setImage(markerImage);

위 상황에서 마커이미지를 비교하면 어떻게 될까요?

console.log(markerImage === marker.getImage()); // true

true가 나옵니다. 동일한 객체라는 뜻입니다.
Marker API가 리턴하는 값이 지정한 값과 다르지 않다는 뜻이기도 하죠.

겪고 계신 문제는 비교하는 코드의 문제라기 보다는
그 비교문을 돌고 있는 for문이 부작용을 일으키고 있을 가능성이 매우 높습니다.

뭐… 저도 추측만 할 수 있을 뿐, 코드를 보지 않는 이상 확답을 드릴 수 없습니다.

1개의 좋아요