Ta strona została przetłumaczona przez Cloud Translation API.

Dodawanie mapy do aplikacji na iOS (Objective-C)

1. Zanim zaczniesz

W skrócie

Z tego kursu dowiesz się wszystkiego, czego potrzebujesz, aby zacząć korzystać z Google Maps Platform do tworzenia aplikacji na iOS w celu C. Poznasz wszystkie podstawowe informacje, od konfiguracji po ładowanie pakietu SDK Map Google na iOS, wyświetlanie pierwszej mapy, pracę ze znacznikami i klastrami, rysowanie na mapie i obsługę interakcji użytkowników.

Co stworzysz

Dzięki nim dowiesz się, jak stworzyć aplikację na iOS, która:

Wczytuje pakiet SDK Maps na iOS i bibliotekę narzędzi Maps SDK na iOS
Wyświetla mapę wyśrodkowaną w Sydney w Australii
Wyświetla niestandardowe znaczniki dla 100 punktów wokół Sydney
Implementuje grupowanie znaczników
Włącza interakcję użytkownika, która powoduje ponowne wyśrodkowanie i rysuje na mapie okrąg po kliknięciu znacznika

Czego się nauczysz

Pierwsze kroki z Google Maps Platform
Wczytywanie pakietu Maps SDK na iOS oraz pakietu Google Maps SDK na iOS
Wczytuję mapę
Używanie znaczników, znaczników niestandardowych i grupowania znaczników
Współpraca z systemem wydarzeń Maps SDK na iOS w celu zapewnienia interakcji z użytkownikami
Automatyczne kontrolowanie mapy
Rysowanie na mapie

Wymagania wstępne

Aby ukończyć ćwiczenia z programowania, musisz zapoznać się z poniższymi elementami. Jeśli już znasz Google Maps Platform, przejdź od razu do ćwiczenia z programowania.

Wymagane usługi Google Maps Platform

W tym ćwiczeniu wykorzystasz te usługi Google Maps Platform:

Maps SDK na iOS
Biblioteka narzędzi Google Maps SDK na iOS

Pierwsze kroki z Google Maps Platform

Jeśli korzystasz z Google Maps Platform po raz pierwszy, zapoznaj się z przewodnikiem dla początkujących po Google Maps Platform lub obejrzyj tę playlistę, aby poznać te wskazówki:

Utwórz konto rozliczeniowe.
Utwórz projekt.
Włącz interfejsy API i pakiety SDK Google Maps Platform (znajdziesz je w poprzedniej sekcji).
Wygeneruj klucz interfejsu API.

Inne wymagania dotyczące ćwiczeń z programowania

Aby ukończyć ćwiczenia z programowania, potrzebne będą następujące konta, usługi i narzędzia:

konto Google Cloud Platform z włączonymi płatnościami,
Klucz interfejsu API Google Maps Platform z włączonym pakietem SDK Maps na iOS
Podstawowe informacje o celu C
Xcode 12.0 z docelowym pakietem SDK 12.0 lub nowszym

2. Konfiguracja

Aby włączyć tę funkcję, musisz włączyć pakiet SDK Maps na iOS.

Konfigurowanie Google Maps Platform

Jeśli nie masz jeszcze konta Google Cloud Platform ani projektu z włączonymi płatnościami, przeczytaj przewodnik Pierwsze kroki z Google Maps Platform, by utworzyć konto rozliczeniowe i projekt.

W Cloud Console kliknij menu projektu i wybierz projekt, którego chcesz użyć w tym ćwiczeniu z programowania.

Włącz interfejsy API i pakiety SDK Google Maps Platform wymagane w ramach tego ćwiczenia z ćwiczeń w Google Cloud Marketplace. W tym celu wykonaj czynności opisane w tym filmie lub w tej dokumentacji.
Wygeneruj klucz interfejsu API na stronie Dane logowania w Cloud Console. Odpowiednie instrukcje znajdziesz w tym filmie lub w tej dokumentacji. Wszystkie żądania wysyłane do Google Maps Platform wymagają klucza interfejsu API.

Konfiguracja szablonu startowego projektu

Zanim rozpoczniesz to ćwiczenie programowania, wykonaj te czynności, by pobrać szablon projektu startowego oraz pełny kod rozwiązania:

Pobierz lub utwórz rozwidlenie repozytorium GitHub dla tego ćwiczenia z programowania na https://github.com/googlecodelabs/maps-platform-101-objc.

Projekt StarterApp znajduje się w katalogu /starter i obejmuje podstawową strukturę pliku – musisz to zrobić. Wszystkie potrzebne informacje znajdziesz w katalogu /starter/StarterApp.

Jeśli chcesz zobaczyć pełny kod rozwiązania, możesz wykonać opisane powyżej czynności konfiguracyjne, aby sprawdzić to rozwiązanie w katalogu /solution/SolutionApp.

3. Zainstaluj pakiet SDK Maps na iOS

Pierwszym krokiem do korzystania z pakietu Maps SDK na iOS jest zainstalowanie wymaganych zależności. Ten proces składa się z 2 etapów: instalacji pakietu SDK Maps na iOS oraz pakietu SDK Maps na iOS z biblioteki zależności Cocoapods i przekazanie klucza interfejsu API do pakietu SDK.

Dodaj do pakietu Podfile Maps SDK na iOS oraz Maps SDK na iOS.

W ramach tego ćwiczenia wykorzystasz pakiet SDK Maps na iOS, który zawiera wszystkie podstawowe funkcje Map Google, oraz bibliotekę narzędzi iOS na iOS, która udostępnia różne narzędzia do wzbogacania mapy, w tym możliwość gromadzenia znaczników.

Na początek otwórz w Xcode (lub preferowanym edytorze tekstu) plik Pods > Podfile i zaktualizuj plik, aby uwzględnić zależności pakietu SDK Maps na iOS i biblioteki narzędzi w use_frameworks!:

pod 'GoogleMaps'
pod 'Google-Maps-iOS-Utils'

Zainstaluj pakiet SDK Maps na iOS i pody z biblioteki biblioteki narzędzi dla iOS.

Aby zainstalować zależności, uruchom polecenie pod install w katalogu /starter przy użyciu wiersza poleceń. Cocoapods automatycznie pobierze zależności, a także utworzy StarterApp.xcworkspace. 3. Po zainstalowaniu zależności otwórz StarterApp.xcworkspace w Xcode, a następnie uruchom aplikację w symulatorze iPhone'a, naciskając Command+R. Jeśli wszystko jest skonfigurowane prawidłowo, symulator uruchomi się i wyświetli się czarny ekran. Nie martw się, nie udało Ci się jeszcze stworzyć niczego, więc jest to normalne. 4. Zaimportuj pakiet SDK do środowiska AppDelegate.h.

Po dodaniu zależności dodaj klucz interfejsu API do pakietu SDK. Pierwszym krokiem jest zaimportowanie pakietu Maps SDK na iOS jako zależności, co umieść poniżej pod instrukcją importu #import "AppDelegate.h":

@import GoogleMaps;

Pod instrukcją importu pakietu SDK na iOS zadeklaruj stałą NSString z wartością ustawioną na klucz interfejsu API:

static NSString *const kMapsAPIKey = @"YOUR API KEY";

Przekaż klucz interfejsu API do pakietu SDK na iOS, wywołując provideAPIKey w GMSServices przy użyciu metody application: didFinishLaunchingWithOptions:

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GMSServices provideAPIKey:kMapsAPIKey];
  return YES;
}

Twój zaktualizowany plik AppDelegate.m powinien teraz wyglądać tak:

#import "AppDelegate.h"
@import GoogleMaps;

static NSString *const kMapsAPIKey = @"YOUR API KEY";

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GMSServices provideAPIKey:kMapsAPIKey];
  return YES;
}
@end

Dane Podfile powinny wyglądać tak:

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '11.0'

target 'StarterApp' do
  use_frameworks!

pod 'GoogleMaps', '5.1.0.0'
pod 'Google-Maps-iOS-Utils', '3.4.0'

end

Po dodaniu zależności i dostarczeniu klucza interfejsu API możesz zacząć wywoływać pakiet SDK Maps na iOS.

4. Wyświetlanie mapy

Czas wyświetlić swoją pierwszą mapę!

Najpopularniejszym elementem pakietu SDK Maps na iOS jest klasa GMSMapView, która udostępnia wiele metod tworzenia instancji i manipulowania nimi. Jak to się robi?

Otwórz aplikację ViewController.m.

W tym miejscu pozostałe zadania z tego ćwiczenia. Zauważysz, że zdarzenia cyklu życia loadView i viewDidLoad w kontrolerze widoku danych zostały już usunięte. 2. Aby zaimportować pakiet SDK Maps na iOS, u góry pliku dodaj:

@import GoogleMaps;

Zadeklaruj zmienną instancji ViewController do przechowywania GMSMapView.

Wystąpienie GMSMapView jest głównym obiektem, z którym będziesz pracować w ramach tego ćwiczenia z programowania, i będziesz się od niego odwoływać za pomocą różnych metod cyklu życia kontrolera widoku. Aby to zrobić, zaktualizuj implementację ViewController, aby zadeklarować zmienną instancji w celu jej przechowywania:

@implementation ViewController {
  GMSMapView *_mapView;
}

W loadView utwórz instancję GMSCameraPosition.

GMSCameraPosition określa, gdzie mapa ma być wyśrodkowana i jaki ma być wyświetlany poziom powiększenia. Wywołuje on metodę cameraWithLatitude:longitude:zoom:, by wyśrodkować mapę na Sydney w Australii z długością geograficzną -33, 86 i długością geograficzną 151, 20 z powiększeniem 12:

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86 longitude:151.20 zoom:12];

W loadView utwórz instancję GMSMapView, aby utworzyć instancję mapy.

Aby utworzyć nową instancję mapy, wywołaj mapWithFrame:camera:. Zwróć uwagę, że klatka jest ustawiona na CGRectZero – jest to zmienna globalna z biblioteki CGGeometry na iOS, która określa 0 szerokość i 0 wysokość w pozycji (0,0) w widoku kontrolera. Aparat jest ustawiony w nowo utworzonej pozycji kamery.

Aby wyświetlić mapę tak naprawdę, w widoku głównym kontrolera widoku ustaw _mapview na tryb pełnoekranowy, który powoduje wyświetlenie mapy.

_mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
self.view = _mapView;

Ustaw GMSMapViewDelegate na kontroler widoku.

Gdy to zrobisz, będziesz mieć możliwość obsługi zdarzeń z interakcji użytkowników w instancji GMSMapView – będzie to potrzebne w kolejnych krokach.

Najpierw zaktualizuj interfejs dostawcy ViewController, aby był zgodny z protokołem GMSMapViewDelegate:

@interface ViewController ()<GMSMapViewDelegate>

Następnie dodaj te elementy, by ustawić GMSMapViewDelegate na ViewController.

_mapView.delegate = self;

Teraz ponownie załaduj aplikację w symulatorze iOS (Command+R). Powinna pojawić się mapa.

Podsumowując: w tym kroku utworzyliśmy instancję GMSMapView, aby wyświetlić mapę wyśrodkowaną na terenie Sydney w Australii.

Twój plik ViewController.m powinien teraz wyglądać tak:

#import "ViewController.h"
#import "LocationGenerator.h"
@import GoogleMaps;

@interface ViewController ()<GMSMapViewDelegate>
@end

@implementation ViewController {
  GMSMapView *_mapView;
}

- (void)loadView {
  [super loadView];
  GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86 longitude:151.20 zoom:12];
  _mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
  self.view = _mapView;
  _mapView.delegate = self;
}

5. definiowanie stylów map w Google Cloud (opcjonalne)

Możesz dostosować styl mapy, korzystając ze stylu mapy w Google Cloud.

Utwórz identyfikator mapy

Jeśli nie masz jeszcze identyfikatora, ale nie jest on jeszcze powiązany ze stylem mapy, zapoznaj się z przewodnikiem po identyfikatorach map, by wykonać te czynności:

Utwórz identyfikator mapy.
Powiąż identyfikator mapy ze stylem mapy.

Dodawanie identyfikatora mapy do aplikacji

Aby użyć identyfikatora mapy utworzonego w poprzednim kroku, otwórz plik ViewController.m, a w metodzie loadView utwórz obiekt GMSMapID i podaj go. Następnie zmodyfikuj wystąpienie GMSMapView, dodając obiekt GMSMapID jako parametr.

ViewController.m

- (void)loadView {
    GMSMapID *mapID = [[GMSMapID alloc] initWithIdentifier:@"YOUR_MAP_ID"];
    _mapView = [GMSMapView mapWithFrame:CGRectZero mapID:mapID camera:camera];
    // ...
}

Po wykonaniu tych czynności uruchom aplikację, aby zobaczyć mapę w wybranym przez siebie stylu.

6. Dodawanie znaczników do mapy

Pakiet SDK Map Google na iOS zapewnia wiele funkcji do wykonywania przez programistów, ale najpopularniejsze są umieszczanie znaczników na mapie. Znaczniki umożliwiają pokazywanie określonych punktów na mapie i są często używanym elementem interfejsu do obsługiwania użytkowników. Jeśli korzystałeś już z Map Google, prawdopodobnie znasz domyślny znacznik, który wygląda tak:

W tym kroku dowiesz się, jak używać klasy GMSMarker do umieszczania znaczników na mapie.

Pamiętaj, że znaczniki nie mogą zostać umieszczone na mapie do momentu załadowania mapy z poprzedniego kroku w zdarzeniu cyklu życia w widoku „loadView”, dlatego musisz wykonać te czynności w zdarzeniu cyklu życia w viewDidLoad, które jest wywoływane po wczytaniu widoku (i mapy).

Zdefiniuj obiekt CLLocationCoordinate2D.

CLLocationCoordinate2D to struktura udostępniona przez bibliotekę CoreLocation na iOS, która określa lokalizację geograficzną przy określonej szerokości i długości geograficznej. Aby utworzyć pierwszy znacznik, zdefiniuj obiekt CLLocationCoordinate2D i ustaw długość i szerokość geograficzną na środku mapy. Współrzędne środka mapy można wyświetlić w widoku mapy za pomocą właściwości camera.target.latitude i camera.target.longitude.

CLLocationCoordinate2D mapCenter = CLLocationCoordinate2DMake(_mapView.camera.target.latitude, _mapView.camera.target.longitude);

Utwórz instancję GMSMarker.

Maps SDK na iOS udostępnia klasę GMSMarker. Każde wystąpienie tagu GMSMarker reprezentuje pojedynczy znacznik na mapie i tworzy się go, wywołując markerWithPosition: i przekazując obiekt CLLocationCoordinate2D w celu wskazania pakietowi SDK, gdzie umieścić znacznik na mapie.

GMSMarker *marker = [GMSMarker markerWithPosition:mapCenter];

Ustaw ikonę niestandardowego znacznika.

Domyślny czerwony znacznik w Mapach Google to świetna sprawa, ale trzeba jeszcze dostosować mapę. Na szczęście użycie niestandardowego znacznika jest bardzo łatwe z wykorzystaniem pakietu SDK Maps na iOS. Zauważysz, że projekt StarterApp zawiera obraz o nazwie „custom_pin.png' możesz go użyć, ale możesz użyć dowolnego obrazu.

Aby ustawić znacznik niestandardowy, ustaw właściwość icon znacznika na wystąpienie UIImage.

marker.icon = [UIImage imageNamed:@"custom_pin.png"];

Wyświetl znacznik na mapie.

Twój znacznik zostanie utworzony, ale nie zobaczysz go na mapie. Aby to zrobić, we właściwości map instancji GMSMarker ustaw instancję GMSMapView.

marker.map = _mapView;

Teraz ponownie załaduj aplikację, aby wyświetlić pierwszą mapę ze znacznikiem.

Podsumowując: w tej sekcji tworzysz wystąpienie klasy GMSMarker i stosujesz ją w widoku mapy, by wyświetlać na niej znacznik. Zaktualizowane zdarzenie cyklu życia viewList w formacie ViewController.m powinno wyglądać tak:

- (void)viewDidLoad {
  [super viewDidLoad];

  CLLocationCoordinate2D mapCenter = CLLocationCoordinate2DMake(_mapView.camera.target.latitude, _mapView.camera.target.longitude);
  GMSMarker *marker = [GMSMarker markerWithPosition:mapCenter];
  marker.icon = [UIImage imageNamed:@"custom_pin.png"];
  marker.map = _mapView;
}

7. Włącz klastry znaczników

Jeśli wiele znaczników jest w zbyt blisko siebie, może wystąpić problem, który polega na tym, że znaczniki się nakładają albo są za bardzo zatłoczone, co źle wpływa na wygodę użytkowników. Jeśli na przykład dwa znaczniki są bardzo blisko siebie, może dojść do takiej sytuacji:

Tu zaczyna się grupowanie znaczników. Kolejnym często stosowaną funkcją funkcji grupowania znaczników jest grupowanie pobliskich znaczników w jedną ikonę, która zmienia się w zależności od poziomu powiększenia, w ten sposób:

Algorytm grupowania znaczników dzieli widoczny obszar mapy na siatkę, a następnie grupuje ikony w tej samej komórce. Na szczęście nie martw się – zespół Google Maps Platform stworzył przydatną bibliotekę narzędziową typu open source o nazwie Google Maps SDK for iOS Utility Library. Ta biblioteka zajmuje się m.in. automatycznym grupowaniem znaczników. Więcej o klastrach znaczników możesz dowiedzieć się z dokumentacji Google Maps Platform. Możesz też zapoznać się ze źródłem dla biblioteki narzędzi iOS na GitHub.

Dodaj do mapy znacznie więcej znaczników.

Aby zobaczyć, jak tworzy się znaczniki w praktyce, musisz mieć ich wiele na mapie. Dla ułatwienia w projekcie startowym w LocationGenerator.m dostępny jest wygodny generator znaczników.

Aby dodać do mapy dowolną liczbę znaczników, wystarczy wywołać funkcję generateMarkersNear:count: w cyklu życia widoku danych viewDidLoad za pomocą kontrolera widoku pod kodem z poprzedniego kroku. Metoda tworzy liczbę znaczników określoną w count w losowych lokalizacjach wokół współrzędnych określonych w obiekcie CLLocationCoordinate2D. W takim przypadku możesz przekazać mu utworzoną wcześniej zmienną mapCenter. Znaczniki są zwracane w tagu NSArray.

NSArray<GMSMarker *> *markerArray = [LocationGenerator generateMarkersNear:mapCenter count:100];

Zaimportuj pakiet SDK Map Google na iOS.

Aby dodać bibliotekę narzędzi Map Google na iOS jako zależność od projektu, dodaj do listy zależności u góry sekcji ViewController.m ten wpis:

@import GoogleMapsUtils;

Skonfiguruj klaster znaczników.

Aby móc skorzystać z klastrów znaczników, musisz skonfigurować 3 funkcje jego działania: algorytm klastra, generator ikon oraz mechanizm renderowania. Algorytm określa sposób grupowania znaczników, np. odległość między znacznikami w tym samym klastrze. Generator ikon udostępnia ikony klastra do wykorzystania na różnych poziomach powiększenia. Moduł renderowania obsługuje renderowanie ikon klastrów na mapie.

Jeśli wolisz, możesz napisać je wszystkie od podstaw, ale biblioteka narzędzi Map Google na iOS udostępnia domyślne implementacje, które ułatwiają ten proces. Wystarczy dodać:

id<GMUClusterAlgorithm> algorithm = [[GMUNonHierarchicalDistanceBasedAlgorithm alloc] init];

id<GMUClusterIconGenerator> clusterIconGenerator = [[GMUDefaultClusterIconGenerator alloc] init];

id<GMUClusterRenderer> renderer = [[GMUDefaultClusterRenderer alloc] initWithMapView:_mapView clusterIconGenerator:clusterIconGenerator];

Utwórz instancję GMUClusterManager.

GMUClusterManager to klasa implementująca klastry znaczników, wykorzystująca określony przez Ciebie algorytm, generator ikon i mechanizm renderowania. Aby utworzyć mechanizm renderowania i udostępnić go w widoku mapy, najpierw dodaj zmienną do implementacji ViewController do przechowywania instancji menedżera klastrów:

@implementation ViewController {
  GMSMapView *_mapView;
  GMUClusterManager *_clusterManager;
}

Następnie utwórz wystąpienie GMUClusterManager w zdarzeniu cyklu życia viewDidLoad:

_clusterManager = [[GMUClusterManager alloc] initWithMap:_mapView algorithm:algorithm renderer:renderer];

Dodaj znaczniki i uruchom klaster znaczników.

Po skonfigurowaniu instancji klastra znaczników wystarczy przekazać menedżerowi klastra tablicę klastrów do wywołania, wywołując addItems:, a następnie uruchamiając klaster, wywołując cluster.

[_clusterManager addItems:markerArray];
[_clusterManager cluster];

Załaduj ponownie aplikację, a powinno być ich mnóstwo. Możesz bawić się różnymi poziomami powiększenia, powiększając i pomniejszając mapę, aby zobaczyć znaczniki znaczników podczas powiększania i pomniejszania.

Podsumowując: w tym kroku skonfigurujesz wystąpienie klastra znaczników z biblioteki pakietu SDK Map Google na iOS, a następnie użyjesz go do grupowania 100 znaczników na mapie. Twoje zdarzenie cyklu życia (viewDidLoad) w regionie ViewController.m powinno teraz wyglądać następująco:

- (void)viewDidLoad {
  [super viewDidLoad];

  CLLocationCoordinate2D mapCenter = CLLocationCoordinate2DMake(_mapView.camera.target.latitude,
                                                                _mapView.camera.target.longitude);
  GMSMarker *marker = [GMSMarker markerWithPosition:mapCenter];
  marker.icon = [UIImage imageNamed:@"custom_pin.png"];
  marker.map = _mapView;
  NSArray<GMSMarker *> *markerArray = [LocationGenerator generateMarkersNear:mapCenter count:100];

  id<GMUClusterAlgorithm> algorithm = [[GMUNonHierarchicalDistanceBasedAlgorithm alloc] init];
  id<GMUClusterIconGenerator> clusterIconGenerator = [[GMUDefaultClusterIconGenerator alloc] init];
  id<GMUClusterRenderer> renderer = [[GMUDefaultClusterRenderer alloc] initWithMapView:_mapView clusterIconGenerator:clusterIconGenerator];
  _clusterManager = [[GMUClusterManager alloc] initWithMap:_mapView algorithm:algorithm renderer:renderer];

  [_clusterManager addItems:markerArray];
  [_clusterManager cluster];
}

8. Dodaj interakcję użytkownika

Teraz masz atrakcyjną mapę, która zawiera znaczniki i ich grupowanie. W tym kroku dodasz dodatkowe czynności związane z interakcjami użytkownika za pomocą elementu GMSMapViewDelegate, który został wcześniej skonfigurowany do kontrolera widoku, aby zwiększyć wygodę użytkowników Twojej mapy.

Maps SDK na iOS to kompleksowy system zdarzeń zaimplementowany poprzez przekazywanie dostępu do mapy. Zawiera on moduły obsługi zdarzeń, które umożliwiają wykonywanie kodu w przypadku różnych interakcji użytkownika. Na przykład osoba, której przekazano dostęp do mapy, zawiera metody, które umożliwiają uruchamianie kodu w przypadku takich interakcji jak klikanie mapy i znaczników przez użytkownika, przesuwanie widoku mapy oraz powiększanie i pomniejszanie widoku.

W tym kroku programowo przesuwa się mapę na środek, który jest kliknięty przez użytkownika.

Zaimplementuj detektor kliknięć markerów.

mapView:didTapMarker jest wywoływany za każdym razem, gdy użytkownik kliknie jeden z utworzonych wcześniej znaczników, a także wtedy, gdy użytkownik kliknie klaster znaczników (wewnętrznie klastry znaczników zostaną zaimplementowane jako wystąpienie GMSMarker).

Aby zaimplementować detektor zdarzeń, zacznij od umieszczenia go na dole elementu ViewController.m przed instrukcją end.

Zauważysz, że metoda zwraca NO. Dzięki temu po uruchomieniu kodu modułu obsługi zdarzeń pakiet SDK do systemu iOS będzie nadal wykonywać domyślną funkcję GMSMarker, na przykład wyświetlać okno informacyjne, jeśli zostało skonfigurowane.

- (BOOL)mapView:(GMSMapView *)mapView didTapMarker:(GMSMarker *)marker {

  return NO;
}

Obsłuż zdarzenie kliknięcia i animuj kamerę, aby wyśrodkować mapę po kliknięciu znacznika lub klastra znaczników.

Po wywołaniu mapView:didTapMarker przekazuje wystąpienie GMSMarker, które zostało kliknięte, co umożliwia obsługę tego kodu. Możesz użyć tej instancji, aby ponownie wyśrodkować mapę, wywołując widok animateToLocation: w widoku mapy z modułu obsługi zdarzeń i przekazując go do pozycji instancji znacznika, która jest dostępna we właściwości position.

[_mapView animateToLocation:marker.position];

Powiększ grupę znaczników po dotknięciu.

Typowym wzorcem UX jest powiększanie klastrów znaczników po ich kliknięciu. Dzięki temu użytkownicy będą mogli wyświetlać klastry znaczników, ponieważ klaster będzie się powiększał przy niższych poziomach powiększenia.

Jak wspomnieliśmy wcześniej, ikona klastra znaczników to tylko implementacja GMSMarker z ikoną niestandardową. Jak stwierdzić, czy znacznik lub klaster został kliknięty? Gdy menedżer klastra znaczników utworzy nową ikonę klastra, implementuje wystąpienie GMSMarker, by zapewnić zgodność z protokołem o nazwie GMUCluster.. Możesz użyć warunku, aby sprawdzić, czy znacznik przekazany do modułu obsługi zdarzeń jest zgodny z tym protokołem.

Gdy już wiesz, że klaster został kliknięty, możesz wywołać funkcję animateToZoom: w widoku mapy, ustawić powiększenie na bieżący poziom plus jedynkę. Bieżący poziom powiększenia jest dostępny w instancji widoku mapy we właściwości camera.zoom.

Zwróć też uwagę na to, że poniższy kod zwraca YES. Informuje on moduł obsługi zdarzeń, że zakończyło się jego obsługa i że nie ma już więcej kodu w module. Jednym z powodów jest to, aby uniemożliwić obiektowi GMSMarker wykonywanie pozostałej czynności domyślnej, takiej jak wyświetlanie okna informacyjnego, które nie ma sensu w przypadku kliknięcia ikony klastra.

if ([marker.userData conformsToProtocol:@protocol(GMUCluster)]) {
    [_mapView animateToZoom:_mapView.camera.zoom +1];
    return YES;
}

Teraz ponownie załaduj aplikację, a potem kliknij kilka znaczników i klastrów znaczników. Gdy klikniesz jeden z nich, mapa zostanie wyśrodkowana na tym elemencie. Po kliknięciu klastra znaczników mapa zostanie powiększona o 1 poziom, a klaster znaczników się powiększy, pokazując znaczniki umieszczone pod spodem.

Podsumowując: w tym kroku implementujesz detektor kliknięć znaczników i przeprowadzono zdarzenie wyśrodkowania elementu klikniętego. Powiększ, jeśli ten element jest ikoną klastra znaczników.

Metoda mapView:didTapMarker powinna wyglądać tak:

- (BOOL)mapView:(GMSMapView *)mapView didTapMarker:(GMSMarker *)marker {
  [_mapView animateToLocation:marker.position];

  if ([marker.userData conformsToProtocol:@protocol(GMUCluster)]) {
    [_mapView animateToZoom:_mapView.camera.zoom +1];
    return YES;
  }

  return NO;
}

9. Rysuj na mapie

Do tej pory udało Ci się utworzyć mapę Sydney, która pokazuje znaczniki w 100 losowych punktach, i obsługuje interakcję użytkownika. W ostatnim kroku ćwiczenia z programowania użyj pakietu SDK Maps na iOS, aby dodać kolejne przydatne funkcje.

Wyobraź sobie, że z tej mapy będą korzystać użytkownicy, którzy chcą poznać miasto Sydney. Przydatną funkcją jest wizualizacja promienia po kliknięciu znacznika. Dzięki temu użytkownik będzie mógł łatwo zrozumieć, jakie inne miejsca docelowe znajdują się w określonej odległości od klikniętego znacznika.

Pakiet SDK na iOS zawiera zestaw funkcji do rysowania kształtów na mapie, takich jak kwadraty, wielokąty, linie i okręgi. Następnie trzeba wyrenderować okrąg, aby po kliknięciu znacznika był widoczny promień 800 m (około pół mili).

Dodaj zmienną instancji _circ do implementacji elementu ViewController.

Ta zmienna instancji będzie używana do zapisywania ostatnio narysowanego koła, dzięki czemu można ją zniszczyć, zanim pojawi się kolejny. W końcu nie mogłoby to być przydatne dla użytkownika i może wyglądać dość okropnie, gdyby wokół każdego z nich znajdował się okrąg.

Aby to zrobić, zaktualizuj implementację interfejsu ViewController w ten sposób:

@implementation ViewController {
  GMSMapView *_mapView;
  GMUClusterManager *_clusterManager;
  GMSCircle *_circ;
}

Narysuj okrąg po kliknięciu znacznika.

Na dole metody mapView:didTapMarker dodaj poniższy kod, aby utworzyć wystąpienie klasy GMSCircle w pakiecie SDK na iOS, aby narysować nowy okrąg o promieniu 800 metrów, wywołując circleWithPosition:radius: i przekazując go w pozycji klikniętego znacznika – tak jak powyżej.

_circ = [GMSCircle circleWithPosition:marker.position radius:800];

Dostosuj styl koła.

Domyślnie GMSCircle rysuje koło z czarnym pociągiem i przezroczystym wypełnieniem. Będzie się to wyświetlać w przypadku promienia, ale niezbyt dobrze wygląda i jest trochę słabo widoczny. Następnie nadaj okrągowi kolor wypełnienia, by poprawić jego styl, przypisując elementowi UIColor jego właściwość fillColor. Ten kod dodaje szare wypełnienie z przejrzystością 50%:

_circ.fillColor = [UIColor colorWithRed: 0.67 green: 0.67 blue: 0.67 alpha: 0.5];

Pokaż okrąg na mapie.

Tak jak w przypadku wcześniejszego utworzenia znaczników, zauważysz, że samo utworzenie instancji GMSCircle nie pojawia się na mapie. Aby to zrobić, przypisz instancję widoku mapy do właściwości map koła.

_circ.map = _mapView;

Usuń wszystkie wcześniej wyrenderowane kręgi.

Jak już wspomnieliśmy, pozostawienie kręgów na mapie nie powinno być zbyt wygodne dla użytkowników. Aby usunąć okrąg wyrenderowany w poprzednim zdarzeniu kliknięcia, ustaw właściwość map elementu _circ na nil u góry mapView:didTapMarker.

_circ.map = nil;

Załaduj ponownie aplikację i kliknij znacznik. Po każdym kliknięciu znacznika powinno zostać wyświetlone nowe kółko, a wcześniej usunięty okrąg zostanie usunięty.

Podsumowując: w tym kroku użyto klasy GMSCircle do renderowania okręgu po każdym kliknięciu znacznika.

Metoda mapView:didTapMarker powinna wyglądać tak:

- (BOOL)mapView:(GMSMapView *)mapView didTapMarker:(GMSMarker *)marker {
  _circ.map = nil;
  [_mapView animateToLocation:marker.position];

  if ([marker.userData conformsToProtocol:@protocol(GMUCluster)]) {
    [_mapView animateToZoom:_mapView.camera.zoom +1];
    return YES;
  }

  _circ = [GMSCircle circleWithPosition:marker.position radius:800];
  _circ.fillColor = [UIColor colorWithRed: 0.67 green: 0.67 blue: 0.67 alpha: 0.5];
  _circ.map = _mapView;
  return NO;
}

10. Gratulacje

Udało Ci się stworzyć pierwszą aplikację na iOS za pomocą Google Maps Platform, w tym załadować pakiet SDK Map Google na iOS, załadować mapę, używać znaczników, sterować i rysować na mapie oraz dodawać interakcje użytkowników.

Aby zobaczyć gotowy kod, sprawdź ukończony projekt w katalogu /solution.

Co dalej?

W tym ćwiczeniu omówiliśmy tylko podstawy korzystania z pakietu Maps SDK na iOS. Następnie spróbuj dodać do mapy niektóre z tych obiektów:

Zmień typ mapy, by wyświetlać mapy satelitarne, hybrydowe i ukształtowanie terenu.
Możesz dostosować inne interakcje użytkownika, np. powiększenie czy sterowanie mapami.
Dodaj okna informacyjne, by wyświetlić informacje po kliknięciu znaczników.
Wypróbuj Places SDK na iOS i dodaj do swojej aplikacji szczegółowe funkcje miejsc i dane Google Maps Platform.

Aby dowiedzieć się więcej na temat sposobów korzystania z Google Maps Platform w internecie, kliknij te linki: