카메라 위치 제어

Maps JavaScript API의 3D 지도에서는 cameraPosition 옵션을 사용하여 카메라의 포커스를 관리합니다.

주요 행동:

  • center: 위도 및 경도 좌표는 카메라가 향하는 지도상의 정확한 지점을 지정합니다.
  • cameraPosition 사용: 카메라 자체가 생성 중에 제공된 좌표에 배치됩니다. 이로 인해 특정 관심 지점에 뷰를 중앙에 배치하기가 어려운 경우가 많습니다.

다음 예는 center 옵션을 사용하여 특정 초점을 보장하는 지도를 초기화하는 방법을 보여줍니다. 마커는 center에 제공된 중심점을 나타냅니다.

CSS

gmp-map-3d {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
style.css

HTML

<html>
    <head>
        <title>3D Camera Position</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
    </head>
    <body>
        <gmp-map-3d
            center="40.7860524,-73.9634983,0"
            range="1500"
            tilt="70"
            heading="-150"
            mode="satellite">
            <gmp-marker position="40.7860524,-73.9634983" altitude-mode="clamp-to-ground"></gmp-marker>
        </gmp-map-3d>

        <script
            async
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&v=beta&libraries=maps3d"></script>
    </body>
</html>
index.html

샘플 사용해 보기

시야 및 범위

범위와 fov라는 두 가지 매개변수를 사용하여 뷰포트에 표시되는 지도의 양을 조정할 수 있습니다. 둘 다 '확대/축소' 수준에 영향을 미치지만 작동 방식은 다릅니다.

  • range: 카메라와 중심점 사이의 물리적 거리를 제어합니다. 이 값을 조정하는 것은 카메라를 지도에 더 가까이 또는 더 멀리 이동하는 것과 같습니다.

  • fov (시야): 카메라 렌즈의 각도를 제어합니다. 값이 높을수록 광각 렌즈처럼 주변을 더 많이 보여주고 값이 낮을수록 망원 렌즈처럼 작동합니다.

다음 비교는 fov 스펙트럼의 반대쪽 끝에 있는 동일한 지도를 보여줍니다. 왼쪽 지도에서는 fov가 5 (좁은 시야각/망원)로 설정되어 있고 오른쪽 지도에서는 80 (광각)으로 설정되어 있습니다.

골든게이트교의 3D 항공 렌더링 두 개를 나란히 비교한 이미지 왼쪽에는 전체 다리 구간과 마린 헤드랜드를 넓게 조망할 수 있는 조감도가 표시되어 있습니다. 오른쪽에는 빨간색 현수탑과 가파른 아래쪽 각도의 다리 상판이 극단적으로 클로즈업되어 있습니다.