Dodawanie mapy do aplikacji na iOS (Objective-C)

1. Zanim zaczniesz

Streszczenie

Z tego laboratorium dowiesz się wszystkiego, co jest potrzebne, aby zacząć korzystać z Google Maps Platform do tworzenia aplikacji na iOS w Objective-C. Dowiesz się wszystkiego, co musisz wiedzieć, od konfiguracji po wczytywanie pakietu Maps SDK na iOS, wyświetlanie pierwszej mapy, pracę ze znacznikami i grupowaniem znaczników, rysowanie na mapie oraz obsługę interakcji użytkownika.

Co utworzysz

W tym ćwiczeniu utworzysz aplikację na iOS, która będzie wykonywać te czynności:

• Wczytuje pakiet Maps SDK na iOS i bibliotekę narzędziową pakietu Maps SDK na iOS.
• Wyświetla mapę wyśrodkowaną na Sydney w Australii.
• Wyświetla niestandardowe znaczniki dla 100 punktów w okolicach Sydney
• Implementuje łączenie znaczników w klastry
• Umożliwia interakcję użytkownika, która po kliknięciu znacznika ponownie wyśrodkowuje mapę i rysuje na niej okrąg.

Czego się nauczysz

• Pierwsze kroki z Google Maps Platform
• Wczytywanie pakietu Maps SDK na iOS i biblioteki narzędziowej pakietu Google Maps SDK na iOS
• Wczytywanie mapy
• Korzystanie z markerów, markerów niestandardowych i grupowania markerów
• Korzystanie z systemu zdarzeń pakietu Maps SDK na iOS w celu zapewnienia interakcji użytkownika
• Programowe sterowanie mapą
• Rysowanie na mapie

Wymagania wstępne

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

Wymagane usługi Google Maps Platform

W tym module wykorzystasz te usługi Google Maps Platform:

• Maps SDK na iOS
• Biblioteka narzędziowa pakietu Google Maps SDK na iOS

Pierwsze kroki z Google Maps Platform

Jeśli nie korzystasz jeszcze z Google Maps Platform, wykonaj te czynności, korzystając z przewodnika Wprowadzenie do Google Maps Platform lub z playlisty Wprowadzenie do Google Maps Platform:

1. Utwórz konto rozliczeniowe.
2. Utwórz projekt.
3. Włącz interfejsy API i pakiety SDK Google Maps Platform (wymienione w poprzedniej sekcji).
4. Wygeneruj klucz interfejsu API.

Uwaga: w ramach procesu rejestracji musisz zalogować się na istniejące konto Google lub utworzyć nowe.

Inne wymagania dotyczące tych ćwiczeń z programowania

Aby ukończyć to ćwiczenie, potrzebujesz tych kont, usług i narzędzi:

• konto Google Cloud Platform z włączonymi płatnościami;
• Klucz interfejsu API Google Maps Platform z włączonym pakietem Maps SDK na iOS
• podstawowa znajomość języka Objective-C;
• Xcode 12.0 z docelowym pakietem SDK w wersji 12.0 lub nowszej

2. Konfiguracja

W kroku włączania poniżej musisz włączyć Maps SDK na iOS.

Konfigurowanie Google Maps Platform

Jeśli nie masz jeszcze konta Google Cloud Platform i projektu z włączonymi płatnościami, zapoznaj się z przewodnikiem Pierwsze kroki z Google Maps Platform, aby utworzyć konto rozliczeniowe i projekt.

1. W konsoli Google Cloud kliknij menu projektu i wybierz projekt, którego chcesz użyć w tym samouczku.

2. Włącz interfejsy API i pakiety SDK Google Maps Platform wymagane w tym samouczku w Google Cloud Marketplace. Aby to zrobić, wykonaj czynności opisane w tym filmie lub tej dokumentacji.
3. Wygeneruj klucz interfejsu API na stronie Dane logowania w konsoli Cloud. Możesz wykonać czynności opisane w tym filmie lub tej dokumentacji. Wszystkie żądania wysyłane do Google Maps Platform wymagają klucza interfejsu API.

Konfigurowanie szablonu projektu startowego

Zanim zaczniesz to ćwiczenie (w Codelabs), wykonaj te czynności, aby pobrać szablon projektu początkowego oraz pełny kod rozwiązania:

1. Pobierz lub sklonuj repozytorium GitHub dla tego modułu na stronie https://github.com/googlecodelabs/maps-platform-101-objc.

Projekt StarterApp znajduje się w katalogu /starter i zawiera podstawową strukturę plików, która będzie potrzebna do ukończenia ćwiczeń z programowania. Wszystko, czego potrzebujesz do pracy, znajduje się w katalogu /starter/StarterApp.

Jeśli chcesz zobaczyć działający pełny kod rozwiązania, wykonaj powyższe czynności konfiguracyjne i wyświetl rozwiązanie w katalogu /solution/SolutionApp.

3. Instalowanie pakietu Maps SDK na iOS

Pierwszym krokiem w korzystaniu z pakietu Maps SDK na iOS jest zainstalowanie wymaganych zależności. Ten proces składa się z 2 etapów: zainstalowania pakietu Maps SDK na iOS i biblioteki narzędziowej pakietu Maps SDK na iOS z menedżera zależności Cocoapods oraz podania klucza interfejsu API do pakietu SDK.

1. Dodaj pakiet Maps SDK na iOS i bibliotekę narzędziową pakietu Maps SDK na iOS do Podfile.

W tym laboratorium kodowania użyjesz zarówno pakietu Maps SDK na iOS, który zapewnia wszystkie podstawowe funkcje Map Google, jak i biblioteki narzędziowej Maps iOS, która udostępnia różne narzędzia do wzbogacania mapy, w tym grupowanie znaczników.

Aby zacząć, otwórz w Xcode (lub w ulubionym edytorze tekstu) plik Pods > Podfile i zaktualizuj go, aby zawierał zależności pakietu Maps SDK na iOS i biblioteki narzędziowej w sekcji use_frameworks!:

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

2. Zainstaluj pody pakietu Maps SDK na iOS i biblioteki narzędziowej pakietu Maps SDK na iOS.

Aby zainstalować zależności, uruchom polecenie pod install w katalogu /starter z poziomu wiersza poleceń. Cocoapods automatycznie pobierze zależności i utworzy plik 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 czarny ekran. Nie martw się, nic jeszcze nie zostało utworzone, więc to normalne. 4. Zaimportuj pakiet SDK w AppDelegate.h.

Po zainstalowaniu zależności musisz podać klucz interfejsu API w pakiecie SDK. Pierwszym krokiem jest zaimportowanie pakietu Maps SDK na iOS jako zależności. W tym celu umieść poniższy kod pod instrukcją #import "AppDelegate.h" import:

@import GoogleMaps;

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

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

6. Przekaż klucz interfejsu API do pakietu SDK na iOS, wywołując provideAPIKey na GMSServices w application: didFinishLaunchingWithOptions:.

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

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

Twój Podfile powinien 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

Gdy masz już zainstalowane zależności i klucz interfejsu API, możesz zacząć wywoływać pakiet Maps SDK na iOS.

4. Wyświetlanie mapy

Czas wyświetlić pierwszą mapę.

Najczęściej używaną częścią pakietu Maps SDK na iOS jest klasa GMSMapView, która udostępnia wiele metod umożliwiających tworzenie instancji mapy i manipulowanie nimi. Oto jak to zrobić.

1. Otwórz pokój ViewController.m.

W tym miejscu wykonasz wszystkie pozostałe czynności w tym module. Zauważysz, że zdarzenia cyklu życia loadView i viewDidLoad kontrolera widoku są już dla Ciebie przygotowane. 2. Zaimportuj pakiet Maps SDK na iOS, dodając na początku pliku ten wiersz:

@import GoogleMaps;

3. Zadeklaruj zmienną instancji ViewController, aby przechowywać GMSMapView.

Instancja GMSMapView to główny obiekt, z którym będziesz pracować w trakcie tych ćwiczeń. Będziesz się do niego odwoływać i wykonywać na nim działania w ramach różnych metod cyklu życia kontrolera widoku. Aby udostępnić tę wartość, zaktualizuj implementację ViewController, deklarując zmienną instancji do jej przechowywania:

@implementation ViewController {
  GMSMapView *_mapView;
}

4. W loadView utwórz instancję GMSCameraPosition.

GMSCameraPosition określa, gdzie mapa będzie wyśrodkowana, i poziom powiększenia, który będzie wyświetlany. Ten kod wywołuje metodę cameraWithLatitude:longitude:zoom:, aby wyśrodkować mapę na Sydney w Australii przy szerokości geograficznej –33, 86 i długości geograficznej 151, 20 oraz poziomie powiększenia 12:

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

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

Aby utworzyć nową instancję mapy, wywołaj funkcję mapWithFrame:camera:. Zwróć uwagę, że ramka jest ustawiona na CGRectZero, czyli zmienną globalną z biblioteki CGGeometry iOS, która określa ramkę o szerokości 0 i wysokości 0, znajdującą się w kontrolerze widoku w pozycji (0,0). Kamera zostanie ustawiona w utworzonej przed chwilą pozycji.

Aby wyświetlić mapę, ustaw widok główny kontrolera widoku na _mapview. Spowoduje to wyświetlenie mapy na pełnym ekranie.

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

6. Ustaw GMSMapViewDelegate na kontroler widoku.

Po wdrożeniu delegat widoku mapy umożliwia obsługę zdarzeń pochodzących z interakcji użytkownika z instancją GMSMapView, co będzie potrzebne w dalszych krokach.

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

@interface ViewController ()<GMSMapViewDelegate>

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

_mapView.delegate = self;

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

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

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 (opcjonalnie)

Styl mapy możesz dostosować za pomocą definiowania stylów map w Google Cloud.

Tworzenie identyfikatora mapy

Jeśli nie masz jeszcze identyfikatora mapy powiązanego ze stylem mapy, zapoznaj się z przewodnikiem Identyfikatory mapy i wykonaj te czynności:

1. Utwórz identyfikator mapy.
2. powiązać identyfikator mapy ze stylem mapy.

Uwaga: użycie identyfikatora mapy w pakiecie Maps SDK na Androida lub Maps SDK na iOS powoduje wczytanie mapy, które skutkuje naliczeniem opłaty za mapę dynamiczną. Więcej informacji znajdziesz w artykule dotyczącym płatności za wykorzystywanie Map Google.

Dodawanie identyfikatora mapy do aplikacji

Aby użyć identyfikatora mapy utworzonego w poprzednim kroku, otwórz plik ViewController.m i w metodzie loadView utwórz obiekt GMSMapID i podaj mu identyfikator mapy. Następnie zmodyfikuj instancję GMSMapView, podają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];
    // ...
}

Gdy to zrobisz, uruchom aplikację, aby zobaczyć mapę w wybranym stylu.

6. Dodawanie znaczników do mapy

Deweloperzy korzystają z Maps SDK na iOS na wiele sposobów, ale umieszczanie znaczników na mapie jest zdecydowanie najpopularniejsze. Znaczniki umożliwiają wyświetlanie określonych punktów na mapie i są powszechnym elementem interfejsu do obsługi interakcji użytkownika. Jeśli korzystasz już z Map Google, prawdopodobnie znasz domyślny znacznik, który wygląda tak:

Z tego kroku dowiesz się, jak używać klasy GMSMarker do umieszczania na mapie markerów.

Pamiętaj, że markerów nie można umieszczać na mapie, dopóki nie zostanie ona wczytana z poprzedniego kroku w zdarzeniu cyklu życia loadView kontrolera widoku. Dlatego te czynności wykonasz w zdarzeniu cyklu życia viewDidLoad, które jest wywoływane po wczytaniu widoku (i mapy).

1. Określ obiekt CLLocationCoordinate2D.

CLLocationCoordinate2D to struktura udostępniana przez bibliotekę CoreLocation w iOS, która określa lokalizację geograficzną na podstawie szerokości i długości geograficznej. Aby rozpocząć tworzenie pierwszego markera, zdefiniuj obiekt CLLocationCoordinate2D i ustaw szerokość i długość geograficzną na środek mapy. Współrzędne środka mapy są dostępne 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);

2. Utwórz instancję GMSMarker.

Pakiet Maps SDK na iOS udostępnia klasę GMSMarker. Każda instancja GMSMarker reprezentuje pojedynczy znacznik na mapie i jest tworzona przez wywołanie funkcji markerWithPosition: oraz przekazanie jej obiektu CLLocationCoordinate2D, aby poinformować pakiet SDK, gdzie umieścić znacznik na mapie..

GMSMarker *marker = [GMSMarker markerWithPosition:mapCenter];

3. Ustaw niestandardową ikonę markera.

Domyślny czerwony znacznik w Mapach Google jest świetny, ale dostosowywanie mapy też jest fajne. Na szczęście używanie niestandardowego markera jest bardzo proste w przypadku pakietu Maps SDK na iOS. Zauważysz, że projekt StarterApp zawiera obraz o nazwie „custom_pin.png”, którego możesz użyć, ale możesz też użyć dowolnego innego obrazu.

Aby ustawić niestandardowy znacznik, ustaw właściwość icon znacznika na instancję UIImage.

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

4. Wyświetl znacznik na mapie.

Znacznik zostanie utworzony, ale nie będzie widoczny na mapie. Aby to zrobić, ustaw właściwość map instancji GMSMarker na instancję GMSMapView.

marker.map = _mapView;

Teraz ponownie załaduj aplikację i zobacz swoją pierwszą mapę ze znacznikiem.

Podsumowując, w tej sekcji utworzyliśmy instancję klasy GMSMarker i zastosowaliśmy ją do widoku mapy, aby wyświetlić na niej znacznik. Zaktualizowane zdarzenie cyklu życia viewDidLoad w ViewController.m powinno teraz 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łączanie klastrowania znaczników

Jeśli używasz wielu znaczników lub znaczników, które znajdują się blisko siebie, mogą one na siebie nachodzić lub być zbyt blisko siebie, co pogarsza komfort użytkownika. Jeśli np. 2 markery znajdują się bardzo blisko siebie, może to wyglądać tak:

W takiej sytuacji przydaje się grupowanie znaczników. Kolejną często wdrażaną funkcją jest grupowanie znaczników, które polega na łączeniu pobliskich znaczników w jedną ikonę zmieniającą się w zależności od poziomu powiększenia, np. tak:

Algorytm klastrowania znaczników dzieli widoczny obszar mapy na siatkę, a następnie grupuje ikony znajdujące się w tej samej komórce. Na szczęście nie musisz się tym martwić, ponieważ zespół Google Maps Platform stworzył przydatną bibliotekę narzędziową o otwartym kodzie źródłowym o nazwie Google Maps SDK for iOS Utility Library. Ta biblioteka automatycznie obsługuje m.in. grupowanie znaczników. Więcej informacji o grupowaniu znaczników znajdziesz w dokumentacji Google Maps Platform. Możesz też sprawdzić źródło biblioteki narzędziowej iOS na GitHub.

1. dodawać do mapy znacznie więcej znaczników,

Aby zobaczyć działanie klastrowania znaczników, musisz mieć na mapie wiele znaczników. Aby ułatwić Ci to zadanie, w projekcie początkowym w LocationGenerator.m znajdziesz wygodny generator znaczników.

Aby dodać do mapy dowolną liczbę znaczników, wywołaj funkcję generateMarkersNear:count: w cyklu życia viewDidLoad kontrolera widoku poniżej kodu z poprzedniego kroku. Metoda tworzy liczbę markerów określoną w parametrze count w losowych lokalizacjach wokół współrzędnych podanych w obiekcie CLLocationCoordinate2D. W takim przypadku możesz po prostu przekazać zmienną mapCenter utworzoną wcześniej. Markery są zwracane w obiekcie NSArray.

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

2. Zaimportuj bibliotekę narzędziową pakietu Google Maps SDK na iOS.

Aby dodać bibliotekę narzędziową Map Google na iOS jako zależność do projektu, dodaj ten kod do listy zależności u góry pliku ViewController.m:

@import GoogleMapsUtils;

3. Skonfiguruj klaster znaczników.

Aby użyć klastrowania znaczników, musisz podać 3 elementy, które określają sposób jego działania: algorytm klastrowania, generator ikon i renderowanie. Algorytm określa sposób grupowania znaczników, np. odległość między znacznikami, które mają być uwzględnione w tym samym klastrze. Generator ikon udostępnia ikony klastrów, które mają być używane na różnych poziomach powiększenia. Moduł renderujący odpowiada za renderowanie ikon klastrów na mapie.

Jeśli wolisz, możesz napisać je wszystkie od zera, ale biblioteka narzędziowa Map na iOS udostępnia domyślne implementacje, które ułatwiają ten proces. Wystarczy, że dodasz te informacje:

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

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

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

4. Utwórz instancję GMUClusterManager.

GMUClusterManager to klasa, która implementuje grupowanie znaczników przy użyciu określonego przez Ciebie algorytmu, generatora ikon i renderera. Aby utworzyć moduł renderujący i udostępnić go widokowi mapy, najpierw dodaj zmienną instancji do implementacji ViewController, aby przechowywać instancję menedżera klastrów:

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

Następnie utwórz instancję GMUClusterManager w zdarzeniu cyklu życia viewDidLoad:

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

5. Dodaj znaczniki i uruchom narzędzie do klastrowania znaczników.

Po skonfigurowaniu instancji klastra znaczników wystarczy przekazać menedżerowi klastra tablicę znaczników do zgrupowania, wywołując addItems:, a potem uruchomić klaster, wywołując cluster.

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

Załaduj ponownie aplikację. Powinno się w niej teraz wyświetlać wiele znaczników, które są odpowiednio zgrupowane. Wypróbuj różne poziomy powiększenia, zsuwając i rozsuwając palce na mapie, aby zobaczyć, jak klastry znaczników dostosowują się do powiększania i pomniejszania.

Podsumowując, w tym kroku skonfigurowaliśmy instancję narzędzia do klastrowania znaczników z biblioteki narzędziowej pakietu Google Maps SDK na iOS, a następnie użyliśmy jej do klastrowania 100 znaczników na mapie. viewDidLoadZdarzenie związane z cyklem życia w ViewController.m powinno teraz 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;
  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. Dodawanie interakcji użytkownika

Masz teraz świetnie wyglądającą mapę, która wyświetla znaczniki i korzysta z grupowania znaczników. W tym kroku dodasz dodatkową obsługę interakcji użytkownika za pomocą zmiennej GMSMapViewDelegate, którą wcześniej ustawiono na kontroler widoku, aby poprawić wygodę korzystania z mapy.

Pakiet Maps SDK na iOS udostępnia kompleksowy system zdarzeń, który jest implementowany za pomocą delegata widoku mapy. Zawiera on obsługę zdarzeń, która umożliwia wykonywanie kodu, gdy zachodzą różne interakcje użytkownika. Na przykład delegat widoku mapy zawiera metody, które umożliwiają wywoływanie wykonywania kodu w przypadku interakcji, takich jak kliknięcie mapy i znaczników przez użytkownika, przesuwanie widoku mapy, powiększanie i pomniejszanie oraz inne.

W tym kroku zaprogramujesz przesuwanie mapy, aby wyśrodkować dowolny znacznik kliknięty przez użytkownika.

1. Zaimplementuj odbiornik kliknięć markera.

mapView:didTapMarker jest wywoływana za każdym razem, gdy użytkownik kliknie jeden z utworzonych wcześniej znaczników, a także za każdym razem, gdy kliknie klaster znaczników (wewnętrznie klastry znaczników są implementowane jako instancja GMSMarker).

Aby zaimplementować odbiornik zdarzeń, zacznij od jego utworzenia na dole pliku ViewController.m przed instrukcją end.

Zauważysz, że metoda zwraca wartość NO. Dzięki temu pakiet SDK na iOS będzie nadal wykonywać domyślną funkcję GMSMarker, np. wyświetlać okno informacyjne (jeśli jest skonfigurowane) po wykonaniu kodu obsługi zdarzeń.

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

  return NO;
}

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

Po wywołaniu funkcja mapView:didTapMarker przekazuje instancję elementu GMSMarker, który został kliknięty, co umożliwia obsługę tego zdarzenia w kodzie. Możesz użyć tego wystąpienia, aby wyśrodkować mapę, wywołując animateToLocation: w widoku mapy z poziomu procedury obsługi zdarzeń i przekazując do niej pozycję wystąpienia znacznika, która jest dostępna we właściwości position.

[_mapView animateToLocation:marker.position];

3. Powiększanie klastra znaczników po jego dotknięciu.

Częstym wzorcem UX jest powiększanie klastrów znaczników po kliknięciu. Dzięki temu użytkownicy mogą wyświetlać zgrupowane markery, ponieważ klaster będzie się rozszerzać przy niższych poziomach powiększenia.

Jak wspomnieliśmy wcześniej, ikona klastra znaczników to w rzeczywistości implementacja GMSMarker z niestandardową ikoną. Jak więc sprawdzić, czy kliknięto znacznik czy klaster znaczników? Gdy menedżer klastrowania znaczników tworzy nową ikonę klastra, implementuje instancję GMSMarker, aby była zgodna z protokołem o nazwie GMUCluster.. Możesz użyć warunku, aby sprawdzić, czy znacznik przekazany do funkcji obsługi zdarzeń jest zgodny z tym protokołem.

Gdy programowo wykryjesz, że kliknięto klaster, możesz wywołać metodę animateToZoom: w instancji widoku mapy i ustawić powiększenie na bieżący poziom powiększenia plus jeden. Bieżący poziom powiększenia jest dostępny w instancji widoku mapy we właściwości camera.zoom.

Zwróć też uwagę, że poniższy kod zwraca wartość YES. Informuje to moduł obsługi zdarzeń, że obsługa zdarzenia została zakończona i nie należy wykonywać w nim żadnego dalszego kodu. Jednym z powodów jest zapobieganie wykonywaniu przez obiekt bazowy GMSMarker pozostałych domyślnych działań, takich jak wyświetlanie okna informacyjnego, co nie miałoby większego 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ę i kliknij kilka znaczników i klastrów znaczników. Gdy dotkniesz jednego z nich, mapa zostanie wyśrodkowana na tym elemencie. Gdy klikniesz klaster znaczników, mapa powiększy się o 1 poziom, a klaster znaczników rozwinie się, aby wyświetlić zgrupowane pod nim znaczniki.

Podsumowując, w tym kroku zaimplementowano detektor kliknięć znacznika i obsłużono zdarzenie, aby wyśrodkować widok na klikniętym elemencie i powiększyć go, jeśli jest to ikona 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. Rysowanie na mapie

Do tej pory udało Ci się utworzyć mapę Sydney, która wyświetla markery w 100 losowych punktach i obsługuje interakcje użytkownika. W ostatnim kroku tego laboratorium użyjesz funkcji rysowania pakietu Maps SDK na iOS, aby dodać do mapy przydatną funkcję.

Wyobraź sobie, że z tej mapy będą korzystać użytkownicy, którzy chcą zwiedzić Sydney. Przydatną funkcją byłoby wizualizowanie promienia wokół znacznika po jego kliknięciu. Dzięki temu użytkownik będzie mógł łatwo sprawdzić, jakie inne miejsca znajdują się w pobliżu klikniętego znacznika.

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

1. Dodaj zmienną instancji _circ do implementacji elementu ViewController.

Ta zmienna instancji będzie używana do zapisywania ostatnio narysowanego okręgu, aby można go było usunąć przed narysowaniem kolejnego. Gdyby każdy kliknięty znacznik miał narysowane wokół niego kółko, nie byłoby to zbyt przydatne dla użytkownika i wyglądałoby dość nieestetycznie.

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

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

2. Narysuj okrąg po kliknięciu znacznika.

Na dole metody mapView:didTapMarker dodaj ten kod, aby utworzyć instancję klasy GMSCircle pakietu iOS SDK, która narysuje nowe koło o promieniu 800 metrów. W tym celu wywołaj metodę circleWithPosition:radius: i przekaż jej pozycję klikniętego znacznika, tak jak w przypadku wyśrodkowania mapy.

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

3. Dostosuj styl okręgu.

Domyślnie tag GMSCircle rysuje okrąg z czarną kreską i przezroczystym wypełnieniem. To zadziała w przypadku wyświetlania promienia, ale nie wygląda zbyt dobrze i jest trochę trudne do zobaczenia. Następnie nadaj okręgowi kolor wypełnienia, aby poprawić styl, przypisując UIColor do właściwości fillColor okręgu. Ten kod doda szare wypełnienie z 50-procentową przezroczystością:

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

4. Wyświetl okrąg na mapie.

Podobnie jak w przypadku tworzenia markerów, samo utworzenie instancji GMSCircle nie powoduje wyświetlenia jej na mapie. Aby to zrobić, przypisz instancję widoku mapy do właściwości map okręgu.

_circ.map = _mapView;

5. Usuń wszystkie wcześniej wyrenderowane okręgi.

Jak wspomnieliśmy wcześniej, dodawanie kolejnych okręgów do mapy nie byłoby zbyt wygodne dla użytkowników. Aby usunąć okrąg wyrenderowany przez poprzednie zdarzenie kliknięcia, ustaw właściwość map elementu _circ na nil u góry elementu mapView:didTapMarker.

_circ.map = nil;

Załaduj ponownie aplikację i kliknij znacznik. Po kliknięciu znacznika powinien pojawić się nowy okrąg, a poprzedni powinien zostać usunięty.

Podsumowując, w tym kroku użyliśmy klasy GMSCircle, aby renderować okrąg za każdym razem, gdy klikniesz znacznik.

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ę utworzyć pierwszą aplikację na iOS przy użyciu platformy Google Maps, w tym załadować pakiet Maps SDK na iOS, załadować mapę, pracować ze znacznikami, sterować mapą i rysować na niej oraz dodawać interakcje użytkownika.

Aby zobaczyć gotowy kod, otwórz ukończony projekt w katalogu /solution.

Co dalej?

W tym codelabie omówiliśmy tylko podstawowe możliwości pakietu Maps SDK na iOS. Następnie spróbuj dodać do mapy niektóre z tych funkcji:

• Zmień typ mapy, aby wyświetlić mapy satelitarne, hybrydowe i topograficzne.
• Dostosuj inne interakcje użytkownika, takie jak powiększanie i elementy sterujące mapą.
• Dodaj okna informacyjne, aby wyświetlać informacje po kliknięciu znaczników.
• Aby dodać do aplikacji zaawansowane funkcje i dane o miejscach z Google Maps Platform, zapoznaj się z pakietem SDK Miejsc na iOS.

Aby dowiedzieć się więcej o sposobach korzystania z Google Maps Platform w internecie, kliknij te linki:

• Dokumentacja Maps SDK na iOS
• Kanał Google Maps Platform w YouTube
• Codelaby Google Maps Platform
• Projekty open source Google Maps Platform na GitHubie