Google은 AI 기술을 사용하여 콘텐츠를 사용자의 기본 언어로 번역합니다. AI 번역에는 오류가 있을 수 있습니다.

앱에 3D 지도 추가

플랫폼 선택: Android iOS JavaScript

시애틀, 샌프란시스코, 파리의 기본 지도

이 페이지에서는 iOS용 지도 3D SDK를 사용하여 iOS 앱에 기본 3D 지도를 추가하는 방법을 보여주는 예시를 안내합니다. 이 페이지의 안내에서는 설정 페이지의 단계를 이미 완료했으며 다음이 있다고 가정합니다.

iOS용 지도 3D SDK가 사용 설정된 Google Cloud 프로젝트
iOS용 지도 3D SDK의 API 키
Xcode iOS용 지도 3D SDK 패키지가 추가된 버전 16.0 이상

이러한 필수사항에 관한 자세한 내용은 설정을 참고하세요.

더 고급 Codelab을 따르세요.

GitHub 에서 더 많은 코드 샘플을 확인하세요.

1부: 기본 SwiftUI 앱 만들기

Xcode에서 새 앱을 만듭니다.
조직 식별자가 com.example로 설정된 상태에서 제품 이름 을 Hello3DWorld로 설정합니다. 패키지 이름은 com.example.Hello3DWorld여야 합니다.
SwiftUI 인터페이스를 선택합니다.
앱에 지도 3D 라이브러리를 추가합니다. 설정 섹션의 안내를 참고하세요.

2부: 지도 추가하기

지구의 미니멀한 3D 지도

ContentView.swift라는 파일을 엽니다. 이 파일은 앱의 진입점 및 기본 탐색입니다.
SwiftUI 및 GoogleMaps3D 패키지를 가져옵니다.
본문 선언 내의 모든 코드를 Map(mode: .hybrid)로 바꿉니다.

Map 을 초기화하기 위해 제공해야 하는 최소 초기 구성은 MapMode입니다.
- .hybrid
- .roadmap 또는
- .satellite
ContentView.swift 파일은 다음과 같이 표시됩니다.
```
import SwiftUI
import GoogleMaps3D

struct ContentView: View {
  var body: some View {
    Map(mode: .hybrid)
  }
}

#Preview {
  ContentView()
}
```

3부: API 키 설정

지도가 초기화되기 전에 API 키를 설정해야 합니다. 지도가 포함된 View의 init() 이벤트 핸들러에서 Map.apiKey를 설정하여 이 작업을 실행합니다.

경고: API 키를 외부 또는 공개 소스 제어에 체크인하지 마세요.
```
import SwiftUI
import GoogleMaps3D

struct ContentView: View {
  init () {
    Map.apiKey = "YOUR_API_KEY"
  }

  var body: some View {
    Map(mode: .hybrid)
  }
}
```

4부: 카메라를 사용하여 지도 뷰 제어

3D 지도 뷰는 Camera 클래스로 제어됩니다. 이 단계에서는 위치, 고도, 방위, 기울기, 롤, 범위를 지정하여 지도 뷰를 맞춤설정하는 방법을 알아봅니다.

Map() 함수 호출을 변경하여 initialCamera 속성을 포함합니다. initialCamera를 초기화하여 맨해튼 시내의 뷰를 표시합니다.

import SwiftUI
import GoogleMaps3D

struct ContentView: View {
  init () {
    Map.apiKey = "YOUR_API_KEY"
  }
  var body: some View {
    Map(initialCamera: .init(
      center: .init(latitude: 40.748339, longitude: -73.985912, altitude: 211.1),
      heading: 52,
      tilt: 68,
      roll: 0.0,
      range: 1039,
      fieldOfView: .degrees(50)
    ), mode: .hybrid)
  }
}

위의 코드는 다음 매개변수의 값을 설정합니다.

center: 카메라 위치를 나타내는 LatLngAltitude
heading: 카메라를 가리키는 북쪽에서 도 단위의 방위
tilt: 기울기 각도(도)로, 0은 바로 위, 90은 수평으로 보는 것입니다.
roll: 카메라의 수직면을 중심으로 롤 각도(도)
range: 위도, 경도 위치에서 카메라까지의 거리(미터)
fieldOfView: 카메라 시야각을 나타내는 각도

이러한 추가 매개변수를 제공하지 않으면 기본값이 사용됩니다.

카메라 뷰에 더 많은 3D 데이터가 표시되도록 하려면 초기 매개변수를 설정하여 더 가까운 기울어진 뷰를 표시합니다.

5부: 앱 미리보기 및 실행

뉴욕시의 기본 3D 지도

Xcode 미리보기 추가

미리보기는 시뮬레이터 또는 외부 기기를 사용하지 않고도 앱을 보고 상호작용할 수 있는 강력한 XCode 기능입니다.

미리보기를 추가하려면 구조체 외부에 #Preview {} 코드 블록을 추가합니다.
```
#Preview {
  ContentView()
}
```
앱 실행

앱을 빌드하고 실행합니다.

지도 로드 및 오류 상태

iOS용 지도 3D SDK는 Map의 상태를 관리하는 동안 기본 제공 시각적 의견을 자동으로 표시합니다.

로드 오버레이: 지도 뷰가 처음 초기화되거나 로드될 때 중앙에 진행률 표시기가 표시됩니다.
오류 오버레이: 지도를 로드하지 못하면 오류 오버레이가 표시됩니다.

Map에서 style(mapID:error:)을 사용하여 클라우드 기반 지도 스타일 지정을 적용하는 경우 error 클로저를 전달하여 스타일 로드 오류를 처리할 수 있습니다.

지도 탭 이벤트 수신 대기

지도에서 탭 이벤트를 수신 대기하려면 Map에 onTap(_:) 수정자를 적용합니다. 사용자가 지도를 탭하면 클로저가 MapTapInfo 값을 수신하며, 이 값은 location (LatLngAltitude) 및 탭한 content (MapTapInfo.Content.map 또는 MapTapInfo.Content.place(id:))를 제공합니다. 관심 지점 상호작용에 관한 자세한 내용은 관심 지점과 상호작용을 참고하세요.

Map(mode: .hybrid)
  .onTap { tapInfo in
    print("Tapped at \(tapInfo.location), content: \(tapInfo.content)")
  }

수고하셨습니다

앱에 3D 지도를 추가했습니다.

다음으로 카메라 경로 애니메이션, 3D 마커, 다각형과 같은 iOS용 지도 3D SDK의 고급 기능을 더 둘러볼 수 있습니다.