3D 지도 컨트롤 및 탐색

플랫폼 선택: Android iOS JavaScript

컨트롤 개요

Maps JavaScript API의 3D 지도를 통해 표시되는 지도에는 사용자와 지도의 상호작용을 지원하는 UI 요소인 탐색 컨트롤이 포함되어 있습니다. 탐색 컨트롤은 기본적으로 지도 UI에 표시되지만, 단순성을 위해 또는 맞춤 컨트롤을 위한 공간을 확보하기 위해 사용 중지할 수 있습니다. UI 컨트롤이 사용 중지된 경우 지도 탐색을 위한 단축키를 사용할 수 있습니다.

Maps JavaScript API의 3D 지도에서는 사전 설정된 카메라 경로를 사용하여 지도에서 사용자를 안내하는 기능도 지원합니다. 이러한 경로는 맞춤설정하고 결합하여 풍부한 3D 환경을 만들 수 있습니다.

탐색 분석 관리 기능

다음 이미지는 Maps JavaScript API의 3D 지도에 표시되는 기본 컨트롤 집합을 보여줍니다.

컨트롤이 있는 지도 이미지

다음은 Maps JavaScript의 3D 지도에 있는 전체 컨트롤 목록입니다.

  • 확대/축소 컨트롤은 지도의 확대/축소 수준을 변경할 수 있는 '+' 및 '-' 버튼을 표시합니다.
  • 이동 컨트롤은 지도의 중심을 변경할 수 있는 '←', '→', '↑', '↓' 버튼을 표시합니다.
  • 회전 컨트롤을 사용하면 카메라의 방향을 변경할 수 있습니다.
  • 기울기 컨트롤을 사용하면 카메라의 기울기를 변경할 수 있습니다.
  • 나침반 컨트롤은 나침반의 북쪽 방향을 나타내며 카메라를 북쪽 방향으로 재설정할 수 있습니다.

다음 코드 샘플은 탐색 컨트롤을 전환하는 방법을 보여줍니다.

JavaScript

const map = new Map3DElement({
  center: { lat: 37.819852, lng: -122.478549, altitude: 2000 },
  tilt: 75,
  heading: 330,
  mode: MapMode.SATELLITE,
  defaultUIHidden: true,
});

HTML

<gmp-map-3d
  mode="hybrid"
  range="639.274301042242"
  tilt="64.92100184857551"
  center="34.0768990953219,-118.47450491266041,292.9794737933403"
  heading="-61.02026752077781"
  default-ui-disabled
></gmp-map-3d>

다음 단계