Dodawanie mapy 3D do aplikacji

Na tej stronie znajdziesz przykład dodawania podstawowej mapy 3D do aplikacji na iOS za pomocą pakietu Maps 3D SDK na iOS. Instrukcje na tej stronie zakładają, że masz już za sobą czynności opisane na stronie Konfiguracja i masz:

• projekt Google Cloud z włączonym pakietem Maps 3D SDK na iOS;
• Klucz interfejsu API pakietu Maps 3D SDK na iOS
• Xcode w wersji 16.0 lub nowszej z dodanym pakietem SDK Map 3D na iOS.

Więcej informacji o tych wymaganiach wstępnych znajdziesz w sekcji Konfiguracja.

Wykonaj bardziej zaawansowane ćwiczenia z programowania

Więcej przykładowych fragmentów kodu znajdziesz na GitHubie

Część 1. Tworzenie podstawowej aplikacji SwiftUI

1. Utwórz nową aplikację w Xcode.
2. Ustaw Nazwę usługi na Hello3DWorld, a identyfikator organizacji na com.example. Nazwa pakietu powinna być w formacie com.example.Hello3DWorld.
3. Wybierz interfejs SwiftUI.
4. Dodaj do aplikacji bibliotekę Map 3D. Instrukcje znajdziesz w sekcji konfiguracji.

Część 2. Dodawanie mapy

1. Otwórz plik o nazwie ContentView.swift. To punkt wejścia i główna nawigacja aplikacji.

2. Zaimportuj SwiftUI i pakiet GoogleMaps3D.

3. Zastąp cały kod w deklaracji treści kodem Map(mode: .hybrid).

   Minimalna konfiguracja początkowa, którą musisz podać, aby zainicjować Map, to MapMode:

   • .hybrid lub
   • .satellite

   Plik ContentView.swift powinien wyglądać tak:

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

Część 3. Ustaw klucz interfejsu API.

1. Klucz interfejsu API musi być ustawiony przed zainicjowaniem mapy. Aby to zrobić, ustaw Map.apiKey w module obsługi zdarzeń init() elementu View, który zawiera Mapę.

   import SwiftUI
   import GoogleMaps3D
   
   struct ContentView: View {
     init () {
       Map.apiKey = "YOUR_API_KEY"
     }
   
     var body: some View {
       Map(mode: .hybrid)
     }
   }
   

Część 4. Sterowanie widokiem mapy za pomocą kamery

Widoki mapy 3D są kontrolowane przez klasę Camera. W tym kroku dowiesz się, jak określić lokalizację, wysokość, kierunek, nachylenie, obrót i zasięg, aby dostosować widok mapy.

1. Zmień wywołanie funkcji Map(), aby zawierało właściwość initialCamera. Zainicjuj initialCamera, aby wyświetlić widok na centrum Manhattanu.

   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)
     }
   }
   

Powyższy kod ustawia wartości tych parametrów:

• heading: kierunek w stopniach od północy, w którym należy skierować kamerę.
• tilt: kąt pochylenia w stopniach, gdzie 0 oznacza widok bezpośrednio z góry, a 90 – widok poziomy.
• roll: kąt obrotu wokół płaszczyzny pionowej kamery wyrażony w stopniach.
• range: odległość kamery od lokalizacji określonej przez szerokość i długość geograficzną w metrach.
• altitude: Wysokość aparatu nad poziomem morza.

Jeśli nie podasz żadnego z tych dodatkowych parametrów, użyjemy wartości domyślnej.

Aby widok kamery wyświetlał więcej danych 3D, ustaw początkowe parametry tak, aby pokazywać bliższy, pochylony widok.

Część 6. Wyświetlanie podglądu i uruchamianie aplikacji

1. Dodawanie podglądu Xcode

   Podglądy to zaawansowana funkcja Xcode, która umożliwia wyświetlanie aplikacji i interakcję z nią bez konieczności używania symulatora lub urządzenia zewnętrznego.

   Aby dodać podgląd, dodaj #Preview {} blok kodu poza strukturą.

   #Preview {
     CameraDemo()
   }
   

2. Uruchamianie aplikacji

Skompiluj i uruchom aplikację.

Gratulacje!

Udało Ci się dodać mapę 3D do aplikacji.

Następnie możesz poznać bardziej zaawansowane funkcje pakietu SDK Map 3D na iOS, takie jak animacje ścieżki kamery, znaczniki 3D czy wielokąty.