map panorama 생성시 오류가 발생합니다

[sky]

안녕하세요. naver map api를 사용하는 도중 에러를 해결하지 못하여 여쭤봅니다.

브라우저에서 동작시 발생하지는 않는 에러가 app화면(웹뷰) 테스트를 위해서 브라우저의 개발자 모드에서 app 사이즈로 테스트하는 경우 아래 에러가 발생합니다.

혹시 어디가 문제인지 알려주시면 감사하겠습니다!!

아래는 작성한 코드의 일부입니다. streetlayer 클릭시 effect가 동작하게 되어있습니다.

export default function NaverPanoMap() {

    const { naver } = window;

    const { mapState, mapDispatch } = useMap();

    const { panoMap, panoItem } = mapState;

    const mapRef = useRef();

 

    useEffect(() => {

        if (mapRef.current && !panoMap) {

            const pano = new naver.maps.Panorama(mapRef.current, {

                position: panoItem,

                pov: {

                    pan: -135,

                    tilt: 0,

                    fov: 100,

                },

                flightSpot: false,

            })

 

            new naver.maps.Event.addListener(pano, "pano_status", (e)=>{

                if(e === naver.maps.PanoramaStatus.ERROR){

                    alert('test');

                } else {

                    mapDispatch({

                        type: 'SET_PANO_MAP',

                        payload: pano,

                    });

                }

            });

        }

    }, [mapRef, panoMap, naver, panoItem, mapDispatch]);

 

    return (

        <div id="pano" className={styles['pano-on']} ref={mapRef} style={{ width: '100%', height: '100vh' }}>

            <div className={styles['pano-close']} onClick={panoClose}>

                <Button variant='float' status='primary' icon={IoClose} onClick={() => window.scrollTo({left: 0, top : 0, behavior: 'smooth'})}/>

            </div>

        </div>

    );

}

Edited October 14, 2024 by sky

[sky]

정확한 원인은 찾지 못하였지만 panormaMap을 생성하는 경우 발생하는 에러로 추측하였습니다. (같은 위치라도 에러가 발생할 때도 있고 발생하지 않을 때도 있었습니다)

파노라마 맵을 초기에 로드하여 보이지 않는 상태로 놔둔 후 위치가 변경되는 경우를 감지하여 보일 수 있도록 하였습니다.

차후에라도 문제의 원인을 알려주시면 감사하겠습니다~!