Dodawanie mapy

Wybierz platformę: Android iOS JavaScript

Mapy są reprezentowane w interfejsie API przez klasę GMSMapView, która jest podklasą klasy UIView. Mapa jest najistotniejszym obiektem w pakiecie Maps SDK na iOS, który zapewnia niezbędne metody dodawania i usuwania innych obiektów, takich jak znaczniki i linie łamane, oraz zarządzania nimi.

Wprowadzenie

Pakiet Maps SDK na iOS umożliwia wyświetlanie Mapy Google w aplikacji na iOS. Mapy te wyglądają tak samo jak mapy wyświetlane w aplikacji Mapy Google na iOS, a pakiet SDK udostępnia wiele tych samych funkcji.

Oprócz funkcji mapowania interfejs API obsługuje też szereg interakcji zgodnych z modelem interfejsu iOS. Możesz na przykład skonfigurować interakcje z mapą, definiując elementy reagujące na gesty użytkownika, takie jak dotknięcie i dwukrotne dotknięcie.

Główną klasą podczas pracy z obiektem Map jest klasa GMSMapView. Klasa GMSMapView automatycznie obsługuje te operacje:

  • łączenie z usługą Mapy Google;
  • pobieranie kart mapy;
  • wyświetlanie kart 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 oraz powiększanie lub pomniejszanie.
    • Reagowanie na gesty 2 palcami przez przechylanie 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ępnianych przez klasę GMSMapView. Użyj GMSMapView, aby dodawać i usuwać znaczniki, nakładki na ziemię i linie łamane, zmieniać typ wyświetlanej mapy oraz kontrolować co jest wyświetlane na mapie, za pomocą klasy GMSCameraPosition.

Tworzenie map za pomocą SwiftUI

SwiftUI oferuje dodatkowy sposób tworzenia interfejsu użytkownika za pomocą podejścia deklaratywnego. Mówisz SwiftUI, jak ma wyglądać widok, oraz wszystkie jego stany, a system zajmuje się resztą. SwiftUI aktualizuje widok, gdy stan bazowy ulegnie zmianie w wyniku zdarzenia lub działania użytkownika.

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

Dodawanie mapy

Podstawowe kroki dodawania mapy:

  1. Aby pobrać pakiet SDK, uzyskać klucz interfejsu API i dodać wymagane frameworki, wykonaj czynności opisane w tych sekcjach:

    1. Konfigurowanie w konsoli Google Cloud

    2. Używanie klucza interfejsu API

    3. Konfigurowanie projektu Xcode

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

    5. Utwórz lub zaktualizuj ViewController. Jeśli mapa ma być wyświetlana, gdy ten kontroler widoku stanie się widoczny, utwórz ją w metodzie viewDidLoad.

    6. Podczas inicjowania widoku mapy ustaw opcje konfiguracji za pomocą GMSMapViewOptions. Właściwości obejmują frame, camera, mapID,backgroundColor lub screen.

    7. Ustaw właściwość opcji mapy camera za pomocą obiektu GMSCameraPosition. Określa on środek i poziom powiększenia mapy.

    8. Utwórz i utwórz instancję klasy GMSMapView za pomocą metody GMSMapView options:. Jeśli ta mapa ma być używana jako jedyny widok kontrolera widoku, jako frame widoku można użyć domyślnej wartości CGRectZero opcji mapy frame – rozmiar mapy zostanie automatycznie zmieniony.

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

Poniższy przykład dodaje do aplikacji mapę wyśrodkowaną 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 dodatkowo skonfigurować obiekt GMSMapView.

Co dalej?

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