Dodawanie mapy 3D do aplikacji

Ta usługa lub funkcja jest eksperymentalna (przed GA). Usługi i funkcje przed GA mogą mieć ograniczoną obsługę, a zmiany w takich usługach i funkcjach mogą być niezgodne z ich innymi wersjami. Oferty przed GA są objęte szczegółowymi warunkami korzystania z usługi Google Maps Platform. Więcej informacji znajdziesz w opisach etapu uruchamiania.

Wybierz platformę: Android iOS JavaScript

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ą kroki opisane na stronie Konfiguracja i masz:

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

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

Wykonaj bardziej zaawansowane ćwiczenie programistyczne.

Więcej przykładów kodu znajdziesz na GitHubie.

Część 1. Tworzenie podstawowej aplikacji SwiftUI

1. Utwórz nową aplikację w Xcode.
2. Ustaw nazwę produktu na Hello3DWorld, a identyfikator organizacji na com.example. Nazwa pakietu powinna mieć postać com.example.Hello3DWorld.
3. Wybierz interfejs SwiftUI.
4. Dodaj bibliotekę Maps 3D do swojej aplikacji. Instrukcje znajdziesz w sekcji Konfiguracja.

Część 2. Dodawanie mapy

1. Otwórz plik o nazwie ContentView.swift. Jest 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,
   • .roadmap lub
   • .satellite

   Twój 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. Ustawianie klucza interfejsu API

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

   **Ostrzeżenie:** nie sprawdzaj klucza interfejsu API w zewnętrznym ani publicznym systemie kontroli źródła.

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

Część 4. Używanie kamery do sterowania widokiem mapy

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

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

   Uwaga: kolejność parametrów ma znaczenie. Kamera jest inicjowana przez podanie najpierw szerokości, a potem długości geograficznej. Upewnij się, że podajesz prawidłowe wartości dla każdego z nich, zwłaszcza gdy wklejasz je z innego źródła. W przeciwnym razie kamera może wyświetlić nieoczekiwaną lokalizację.

   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),
         altitudeMode: .relativeToGround
       ), mode: .hybrid)
     }
   }
   

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

• center: LatLngAltitude reprezentująca lokalizację kamery.
• heading: kierunek w stopniach od północy, w którym jest skierowana kamera.
• tilt: kąt nachylenia w stopniach, gdzie 0 oznacza widok bezpośrednio z góry, a 90 – widok poziomy.
• roll: kąt obrotu wokół płaszczyzny pionowej kamery w stopniach.
• range: odległość w metrach kamery od lokalizacji o określonej szerokości i długości geograficznej.
• fieldOfView: kąt reprezentujący pole widzenia kamery.
• altitudeMode: sposób obliczania wysokości kamery.

Jeśli nie podasz żadnego z tych dodatkowych parametrów, zostanie użyta wartość domyślna.

Uwaga: możesz też dostosować względną wysokość kamery za pomocą nachylenia i zakresu.

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

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

1. Dodaj podgląd Xcode

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

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

   #Preview {
     CameraDemo()
   }
   

2. Uruchom aplikację

Skompiluj i uruchom aplikację.

Gratulacje!

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

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