로드뷰에 커스텀오버레이 올리기
지도와 로드뷰에 커스텀 오버레이를 올립니다. 로드뷰는 커스텀 오버레이가 중앙에 오도록 viewpoint값을 변경시킵니다.
original docs : https://apis.map.kakao.com/web/sample/roadviewCustomOverlay/
결과
Loading...
라이브 에디터
function(){const roadviewRef = useRef()const Content = () => (<div className="overlay_info"><ahref="https://place.map.kakao.com/17600274"target="_blank"rel="noreferrer"><strong>월정리 해수욕장</strong></a><div className="desc"><imgsrc="https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/place_thumb.png"alt=""/><span className="address">제주특별자치도 제주시 구좌읍 월정리 33-3</span></div></div>)return (<><RoadviewCustomOverlayStyle /><Map // 로드뷰를 표시할 Containercenter={{// 지도의 중심좌표lat: 33.5563,lng: 126.7958,}}style={{// 지도의 크기width: "100%",height: "300px",}}level={3}><CustomOverlayMapposition={{lat: 33.55635,lng: 126.795841,}}xAnchor={0.5}yAnchor={1.1}><Content /></CustomOverlayMap></Map><Roadview // 로드뷰를 표시할 Containerposition={{// 지도의 중심좌표lat: 33.5563,lng: 126.7958,radius: 50,}}style={{// 지도의 크기width: "100%",height: "300px",}}ref={roadviewRef}><CustomOverlayRoadviewposition={{lat: 33.55635,lng: 126.795841,}}xAnchor={0.5}yAnchor={0.5}onCreate={(overlay) => {const roadview = roadviewRef.currentconst projection = roadview.getProjection() // viewpoint(화면좌표)값을 추출할 수 있는 projection 객체를 가져옵니다.// 커스텀오버레이의 position과 altitude값을 통해 viewpoint값(화면좌표)를 추출합니다.const viewpoint = projection.viewpointFromCoords(overlay.getPosition(),overlay.getAltitude())roadview.setViewpoint(viewpoint) //커스텀 오버레이를 로드뷰의 가운데에 오도록 로드뷰의 시점을 변화 시킵니다.}}><Content /></CustomOverlayRoadview></Roadview></>)}