로드뷰에 커스텀오버레이 올리기

지도와 로드뷰에 커스텀 오버레이를 올립니다. 로드뷰는 커스텀 오버레이가 중앙에 오도록 viewpoint값을 변경시킵니다.

original docs : https://apis.map.kakao.com/web/sample/roadviewCustomOverlay/

결과

월정리 해수욕장

제주특별자치도 제주시 구좌읍 월정리 33-3

50m

북

북서

서

남서

남

남동

동

북동

라이브 에디터

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

function(){
  const roadviewRef = useRef()

  const Content = () => (
    <div className="overlay_info">
      <a
        href="https://place.map.kakao.com/17600274"
        target="_blank"
        rel="noreferrer"
      >
        <strong>월정리 해수욕장</strong>
      </a>
      <div className="desc">
        <img
          src="https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/place_thumb.png"
          alt=""
        />
        <span className="address">제주특별자치도 제주시 구좌읍 월정리 33-3</span>
      </div>
    </div>
  )

  return (
    <>
      <RoadviewCustomOverlayStyle />
      <Map // 로드뷰를 표시할 Container
        center={{
          // 지도의 중심좌표
          lat: 33.5563,
          lng: 126.7958,
        }}
        style={{
          // 지도의 크기
          width: "100%",
          height: "300px",
        }}
        level={3}
      >
        <CustomOverlayMap
          position={{
            lat: 33.55635,
            lng: 126.795841,
          }}
          xAnchor={0.5}
          yAnchor={1.1}
        >
          <Content />
        </CustomOverlayMap>
      </Map>
      <Roadview // 로드뷰를 표시할 Container
        position={{
          // 지도의 중심좌표
          lat: 33.5563,
          lng: 126.7958,
          radius: 50,
        }}
        style={{
          // 지도의 크기
          width: "100%",
          height: "300px",
        }}
        ref={roadviewRef}
      >
        <CustomOverlayRoadview
          position={{
            lat: 33.55635,
            lng: 126.795841,
          }}
          xAnchor={0.5}
          yAnchor={0.5}
          onCreate={(overlay) => {
            const roadview = roadviewRef.current
            const projection = roadview.getProjection() // viewpoint(화면좌표)값을 추출할 수 있는 projection 객체를 가져옵니다.
            // 커스텀오버레이의 position과 altitude값을 통해 viewpoint값(화면좌표)를 추출합니다.
            const viewpoint = projection.viewpointFromCoords(
              overlay.getPosition(),
              overlay.getAltitude()
            )
            roadview.setViewpoint(viewpoint) //커스텀 오버레이를 로드뷰의 가운데에 오도록 로드뷰의 시점을 변화 시킵니다.
          }}
        >
          <Content />
        </CustomOverlayRoadview>
      </Roadview>
    </>
  )
}