Dodawanie mapy 3D do aplikacji

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 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 z programowania.

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 brzmieć com.example.Hello3DWorld.
3. Wybierz interfejs SwiftUI.
4. Dodaj do aplikacji bibliotekę Maps 3D. Postępuj zgodnie z instrukcjami 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() elementu View, który zawiera mapę.

   **Ostrzeżenie:** nie sprawdzaj klucza interfejsu API w zewnętrznym lub 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 zasięg, 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, ponieważ w przeciwnym razie kamera może pokazywać 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)
       ), 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.

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

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

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

Część 5. 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 {
     ContentView()
   }
   

2. Uruchom aplikację

Skompiluj i uruchom aplikację.

Stany wczytywania mapy i błędu

Pakiet Maps 3D SDK na iOS automatycznie wyświetla wbudowane informacje wizualne podczas zarządzania stanem Map:

• Nakładka wczytywania: gdy widok mapy jest inicjowany lub wczytywany po raz pierwszy, wyświetla się wyśrodkowany wskaźnik postępu.
• Nakładka błędu: jeśli nie uda się wczytać mapy, wyświetli się nakładka błędu.

Jeśli zastosujesz definiowanie stylów map w Google Cloud za pomocą style(mapID:error:) w Map, możesz przekazać zamknięcie error, aby obsługiwać błędy wczytywania stylu.

Nasłuchiwanie zdarzeń kliknięcia mapy

Aby nasłuchiwać zdarzeń kliknięcia mapy, zastosuj do Map onTap(_:). Gdy użytkownik kliknie mapę, zamknięcie otrzyma MapTapInfo wartość, która zawiera location (LatLngAltitude) i klikniętą content (MapTapInfo.Content.map lub MapTapInfo.Content.place(id:)). Więcej informacji o interakcjach z punktami zainteresowania znajdziesz w artykule Interakcje z punktami zainteresowania.

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

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.