React 로 지도에 서로 각각 다른 이미지 를 넣어주려고합니다

지도/로컬 API
#1

지도/로컬 API에 대한 문의게시판입니다.
image
해당 사진은 카카오 지도 api 공식 문서중 다양한 이미지 마커 표시하기입니다.
image
두번째 사진은 현재 저의 react 코드입니다.
문제점은 var markerImageSrc = (이값)
공식문서에서는 해당 변수에 하나의 문자열만 넣어서 사진 url을 해오는데
제가 사용하고싶은거는 배열에 있는값에서 url을 하나씩 넣어주고싶은데
다양한 이미지를 표시할때 서로다른 이미지를 어떻게 보여줄 수 있을까요?

#2

반복문 안에 조건문을 이용해서 특정 마커 이미지를 분기를 태우는 방법
또는 데이터를 배열 안에 오브젝트를 갖는 형태로 구성해서 이미지 경로 값을 가져오는 방법이 있습니다.
로직에 맞게 구현해주세요.

var data = [
    {
        latlng: new kakao.maps.LatLng(33.450705, 126.570677),
        imgSrc: ''// 이미지 경로
    },
    {
        latlng: new kakao.maps.LatLng(33.451393, 126.570738)
        imgSrc: ''// 이미지 경로
    }
];
#3

image
첫번째 사진은 변수 tes1의 콘솔확인입니다.
말씀하신대로 배열안에 오브젝트형태로 데이터를 받아왔습니다.
하지만 저는 활용하는방법이 잘 이해가되지않아요.
image
image
image
image

코드가 여기 까지인데 3번째 사진에서 말씀하신 로직을 어떻게 활용해야할까요?? 144번 라인처럼 배열안에 데이터를 뿌려줘도 값을 못받아옵니다. 감사합니다

#4

144번 줄에서 이미지 속성에 접근하지 못하고 있습니다.
아래처럼 leader.userDetail.profileImgURL 속성으로 접근할 수 있도록 수정해주세요.

createMarkerImage(markerImageSrc.map(item => item.leader.userDetail.profileImgURL), imageSize, imageOptions)

그리고 이전 답변처럼 buskerPositions 변수를 생성할 때
좌표와 이미지 정보 담는 방법도 있으니 참고해주세요.

#5

도움을 주신 코드에서
적용을 하였음에
image
해당 404 에러 혹은 동일한 메세지에 403에러가 나오는 경우는 어느 부분에서 해결책을 찾아야하나요??

저의 백엔드 데이터가 문제인가 싶어서
image
임의로 이렇게 사진 데이터 배열을 사용해도 동일하게 사용이되지않습니다
보통 경로문제라고 하는데 만약에 경로문제라면 markerImageSrc[0].imgSrc를 하게되면 0번 이미지로 출력이 잘됩니다
만약 경로문제라면 markerImageSrc[0].imgSrc 이부분도 동일하게 안되어야하는것이 아닌가요??

해결하였습니다 감사합니다!

1개의 좋아요