アプリに 3D 地図を追加する

プラットフォームを選択: Android iOS JavaScript

このプロダクトまたは機能は、pre-GA（一般提供前）の試験運用版です。pre-GA のプロダクトや機能では、サポートが限定されることがあります。また、pre-GA のプロダクトや機能の変更は、他の pre-GA バージョンには対応していない場合があります。pre-GA のサービスには、Google Maps Platform サービス固有の規約が適用されます。詳しくは、リリース ステージの説明をご覧ください。

このページでは、Maps 3D SDK for iOS を使用して iOS アプリに基本的な 3D 地図を追加する方法の例を紹介します。このページの手順は、[設定] ページの手順が完了しており、次のものが用意されていることを前提としています。

• Maps 3D SDK for iOS が有効になっている Google Cloud プロジェクト
• Maps 3D SDK for iOS の API キー
• Maps 3D SDK for iOS パッケージが追加された Xcode バージョン 16.0 以降。

これらの前提条件の詳細については、セットアップをご覧ください。

より高度な Codelab に取り組む。

GitHub でその他のコードサンプルを確認する。

パート 1: 基本的な SwiftUI アプリを作成する

1. Xcode で新しいアプリを作成します。
2. [Product Name] を Hello3DWorld に設定し、組織 ID を com.example に設定します。パッケージ名は com.example.Hello3DWorld にします。
3. SwiftUI インターフェースを選択します。
4. マップ 3D ライブラリをアプリに追加します。セットアップ セクションの手順をご覧ください。

パート 2: 地図を追加する

1. ContentView.swift というファイルを開きます。これは、アプリのエントリ ポイントであり、メイン ナビゲーションです。

2. SwiftUI と GoogleMaps3D パッケージをインポートします。

3. body 宣言内のコードをすべて Map(mode: .hybrid) に置き換えます。

   Map を初期化するために指定する必要がある最小限の初期構成は、MapMode です。

   • .hybrid、または
   • .satellite

   ContentView.swift ファイルは次のようになります。

   import SwiftUI
   import GoogleMaps3D
   
   struct ContentView: View {
     var body: some View {
       Map(mode: .hybrid)
     }
   }
   
   #Preview {
     ContentView()
   }
   

パート 3: API キーを設定します。

1. API キーは、Map の初期化前に設定する必要があります。これを行うには、地図を含む 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 クラスによって制御されます。このステップでは、地図ビューをカスタマイズするために、位置、高度、見出し、傾斜、ロール、範囲を指定する方法を学習します。

1. 変更するMap()関数呼び出しをインクルードするinitialCamera財産。 初期化initialCameraマンハッタンのダウンタウンの景色を映します。

   注: パラメータの順序は重要です。カメラは、最初に緯度、次に経度を指定して初期化されます。特に別のソースから貼り付ける場合は、それぞれの正しい値を指定してください。そうしないと、カメラに予期しない場所が表示される可能性があります。

   import SwiftUI
   import GoogleMaps3D
   
   struct ContentView: View {
     init () {
       Map.apiKey = "YOUR_API_KEY"
     }
     var body: some View {
       Map(initialCamera: .init(
         latitude: 40.748339,
         longitude: -73.985912,
         altitude: 211.1,
         heading: 52,
         tilt: 68,
         range: 1039
       ), mode: .hybrid)
     }
   }
   

上記のコードでは、次のパラメータの値を設定しています。

• heading: カメラを向ける北からの方向（度）。
• tilt: 傾斜の角度（度単位）。0 は真上、90 は水平方向を向いています。
• roll: カメラの垂直面の周りの回転角度（度）。
• range: 緯度、経度の位置からカメラまでの距離（メートル）
• altitude: 海抜を基準としたカメラの高さ。

これらの追加パラメータを指定しない場合は、デフォルト値が使用されます。

注: カメラの高度は絶対値です。地上が海抜よりかなり高い場所では、地上より低い高度を設定すると、奇妙な視覚効果が生じる可能性があります。

注: チルトと範囲を使用して、カメラの相対高度を調整することもできます。

カメラビューに 3D データをより多く表示するには、初期パラメータを設定して、より近く、傾斜したビューを表示します。

パート 6: アプリのプレビューと実行

1. Xcode プレビューを追加する

   プレビューは、シミュレーターや外部デバイスを使用せずにアプリを表示したり操作したりできる強力な XCode 機能です。

   プレビューを追加するには、構造体の外側に #Preview {} コードブロックを追加します。

   #Preview {
     CameraDemo()
   }
   

2. アプリを実行する

アプリをビルドして実行します。

お疲れさまでした

アプリに 3D マップを正常に追加しました。

次に、カメラパス アニメーション、3D マーカー、ポリゴンなど、Maps 3D SDK for iOS のより高度な機能について説明します。