동동이 마커가 표출이 되지 않는 것 같습니다.

[Colossus312]

https://react-kakao-maps-sdk.jaeseokim.dev/docs/sample/roadview/moveRoadview 해당 페이지에 있는 내용을 적용하려고 합니다.

function(){
  const [center, setCenter] = useState({
    lat: 33.450422139819736,
    lng: 126.5709139924533,
  })

  const [pan, setPan] = useState(0)

  const getAngleClassName = (angle) => {
    const threshold = 22.5 //이미지가 변화되어야 되는(각도가 변해야되는) 임계 값
    for (var i = 0; i < 16; i++) {
      //각도에 따라 변화되는 앵글 이미지의 수가 16개
      if (angle > threshold * i && angle < threshold * (i + 1)) {
        //각도(pan)에 따라 아이콘의 class명을 변경
        return "m" + i
      }
    }
  }

  return (
    <>
      <MoveRoadviewStyle />
      <div style={{ display: "flex" }}>
        <Map // 로드뷰를 표시할 Container
          center={center}
          style={{
            // 지도의 크기
            width: "50%",
            height: "300px",
          }}
          level={3}
        >
          <MapTypeId type={kakao.maps.MapTypeId.ROADVIEW} />
          <CustomOverlayMap
            position={center}
            className={`MapWalker ${getAngleClassName(pan)}`}
            yAnchor={1}
          >
            <div className={`angleBack`}></div>
            <div className={"figure"}></div>
          </CustomOverlayMap>
        </Map>
        <Roadview // 로드뷰를 표시할 Container
          position={{ ...center, radius: 50 }}
          style={{
            width: "50%",
            height: "300px",
          }}
          pan={pan}
          onViewpointChange={(roadview) => setPan(roadview.getViewpoint().pan)}
          onPositionChanged={(roadview) =>
            setCenter({
              lat: roadview.getPosition().getLat(),
              lng: roadview.getPosition().getLng(),
            })
          }
        ></Roadview>
      </div>
    </>
  )
}

페이지에 나온 해당 코드를 그대로 적용할 시 마커가 표출되지 않습니다.

동동이의 CSS는

.MapWalker {position:absolute;margin:-26px 0 0 -51px} .MapWalker .figure {position:absolute;width:25px;left:38px;top:-2px; height:39px;background:url(https://t1.daumcdn.net/localimg/localimages/07/2018/pc/roadview_minimap_wk_2018.png) -298px -114px no-repeat} .MapWalker .angleBack {width:102px;height:52px;background: url(https://t1.daumcdn.net/localimg/localimages/07/2018/pc/roadview_minimap_wk_2018.png) -834px -2px no-repeat;} .MapWalker.m0 .figure {background-position: -298px -114px;} .MapWalker.m1 .figure {background-position: -335px -114px;} .MapWalker.m2 .figure {background-position: -372px -114px;} ...

이렇게 되어있는 부분을 import 했습니다.

임의로 .figure만 부분만 떼서 따로 명명해준 다음 CustomOverlayMap className에 적용하면 이미지 자체는 잘 나옵니다.

MapWalker 뒤에 부가적으로 클래스가 붙으면 불러오지 못하는 것 같은데 어떻게 해야 할까요?

그리고 링크된 페이지에서도 동동이 마커가 표출되지 않고 있습니다. 확인 부탁드립니다!

[JaeSeoKim]

문서가 변경된 API 내용을 따라가지 못하고 있어서 발생한 문제 인 것 같습니다..

https://react-kakao-maps-sdk.jaeseokim.dev/docs/api/interfaces/CustomOverlayRoadviewProps

CustomOverlayMap 컴포넌트는 className prop을 받지 않고, CustomOverlay을 위한 Portal 기능만 제공합니다.

해당 기능을 정상적으로 이용하기 위해서는 아래와 같이 div을 감싸서 className을 전달하여주길 바랍니다.

     <CustomOverlayMap
            position={center}
            yAnchor={1}
          >
            <div className={`MapWalker ${getAngleClassName(pan)}`}>
              <div className={`angleBack`}></div>
              <div className={"figure"}></div>
            </div>
          </CustomOverlayMap>

[Colossus312]

감사합니다! 잘 적용되었습니다.