Dodawanie mapy

Wybierz platformę: Android iOS JavaScript

Mapy są reprezentowane w interfejsie API przez klasę GMSMapView, która jest podklasą klasy UIView. Mapa jest najważniejszym obiektem w pakiecie Maps SDK na iOS i zawiera niezbędne metody dodawania, usuwania i zarządzania innymi obiektami, takimi jak znaczniki i wielokąty.

Wprowadzenie

Pakiet SDK Map na iOS umożliwia wyświetlanie mapy Google w aplikacji na iOS. Wygląd tych map jest taki sam jak w aplikacji Mapy Google na iOS. Pakiet SDK udostępnia wiele takich samych funkcji.

Oprócz funkcji mapowania interfejs API obsługuje też różne interakcje zgodne z modelem interfejsu użytkownika iOS. Możesz na przykład skonfigurować interakcje z mapą, definiując elementy reagujące na gesty użytkownika, takie jak kliknięcie i podwójne kliknięcie.

Kluczowa klasa podczas pracy z obiektem Map to klasa GMSMapView. GMSMapViewautomatycznie wykonuje te operacje:

  • Łączenie z usługą Mapy Google.
  • Pobieranie elementów mapy.
  • wyświetlanie kafelków na ekranie urządzenia;
  • wyświetlanie różnych elementów sterujących, takich jak przesuwanie i powiększanie;
  • Reagowanie na gesty przesuwania i powiększania przez przesuwanie mapy i powiększanie lub pomniejszanie.
    • Reagowanie na gesty 2 palcami przez zmianę kąta widzenia mapy.

Oprócz tych automatycznych operacji możesz kontrolować zachowanie i wygląd mapy za pomocą właściwości i metod udostępnionych przez klasę GMSMapView. GMSMapView umożliwia dodawanie i usuwanie znaczników, nakładek naziemnych i linii wielokątnych, zmianę wyświetlanego typu mapy oraz kontrolowanie tego, co jest widoczne na mapie, za pomocą klasy GMSCameraPosition.

Tworzenie map za pomocą SwiftUI

SwiftUI to dodatkowy sposób tworzenia interfejsu użytkownika za pomocą podejścia deklaratywnego. Musisz tylko określić, jak ma wyglądać widok i jakie ma mieć stany, a system zrobi resztę. SwiftUI aktualizuje widok, gdy stan podstawowy ulegnie zmianie z powodu zdarzenia lub działania użytkownika.

Pakiet SDK Map na iOS jest oparty na UIKit i nie udostępnia widoku zgodnego z SwiftUI. Dodawanie map w SwiftUI wymaga zgodności z elementem UIViewRepresentable lub UIViewControllerRepresentable. Więcej informacji znajdziesz w Codelab dodawanie mapy do aplikacji na iOS za pomocą SwiftUI.

Dodawanie mapy

Podstawowe kroki do dodania mapy:

  1. Aby pobrać pakiet SDK, uzyskać klucz interfejsu API i dodać wymagane platformy, wykonaj te czynności:

    1. Konfigurowanie w konsoli Google Cloud

    2. Używanie klucza interfejsu API

    3. Konfigurowanie projektu Xcode

    4. W pliku AppDelegate podaj klucz interfejsu API metodzie klasy provideAPIKey: w pliku GMSServices.

    5. Utwórz lub zaktualizuj ViewController. Jeśli mapa ma się wyświetlać, gdy kontroler widoku stanie się widoczny, utwórz go w ramach metody viewDidLoad.

    6. Podczas inicjowania widoku mapy ustaw opcje konfiguracji za pomocą parametru GMSMapViewOptions. Do właściwości należą frame, camera, mapID,backgroundColor lub screen.

    7. Ustaw właściwość camera opcji mapy za pomocą obiektu GMSCameraPosition. Określa położenie środka i poziom powiększenia mapy.

    8. Utwórz instancję klasy GMSMapView za pomocą metody GMSMapView options:. Jeśli ta mapa ma być używana jako widok widoczny tylko w kontrolerze widoku, jako widok frame można użyć opcji mapy frame o wartości domyślnej CGRectZero – rozmiar mapy jest dostosowywany automatycznie.

    9. Ustaw obiekt GMSMapView jako widok kontrolera widoku. Na przykład: self.view = mapView;.

W tym przykładzie do aplikacji dodawana jest mapa wyśrodkowana na centrum Singapuru.

Swift

import GoogleMaps

class MapObjects : UIViewController {
  override func viewDidLoad() {
    super.viewDidLoad()

    let options = GMSMapViewOptions()
    options.camera = GMSCameraPosition(latitude: 1.285, longitude: 103.848, zoom: 12)
    options.frame = self.view.bounds;

    let mapView = GMSMapView(options:options)
    self.view = mapView
  }
}

Objective-C

- (void)viewDidLoad {
  [super viewDidLoad];

  GMSMapViewOptions *options = [[GMSMapViewOptions alloc] init];
  options.camera = [GMSCameraPosition cameraWithLatitude:1.285
                                                        longitude:103.848
                                                             zoom:12];
  options.frame = self.view.bounds;

  GMSMapView *mapView = [[GMSMapView alloc] initWithOptions:options];
  self.view = mapView;
}

Po wykonaniu tych czynności możesz dostosować obiekt GMSMapView.

Co dalej?

Po wykonaniu tych czynności możesz skonfigurować ustawienia mapy.