Добавьте карту в свое приложение для iOS (Objective-C)

1. Прежде чем начать

Абстрактный

В этой лаборатории кода вы узнаете все, что вам нужно, чтобы начать использовать платформу Google Maps для создания приложений iOS на языке Objective-C. Вы изучите все основы от настройки до загрузки Maps SDK для iOS, отображения вашей первой карты, работы с маркерами и кластеризацией маркеров, рисования на карте и взаимодействия с пользователем.

Что вы будете строить

342520482a888519.png

В этой лаборатории кода вы создадите приложение для iOS, которое выполняет следующие действия:

  • Загружает Maps SDK для iOS и служебную библиотеку Maps SDK для iOS.
  • Отображает карту с центром в Сиднее, Австралия.
  • Отображает пользовательские маркеры для 100 точек вокруг Сиднея.
  • Реализует кластеризацию маркеров
  • Включает взаимодействие с пользователем, которое повторно центрирует и рисует круг на карте при нажатии маркера.

Что вы узнаете

  • Начало работы с платформой Google Карт
  • Загрузка Maps SDK для iOS и служебной библиотеки Google Maps SDK для iOS
  • Загрузка карты
  • Использование маркеров, пользовательских маркеров и кластеризации маркеров
  • Работа с системой событий Maps SDK для iOS для обеспечения взаимодействия с пользователем
  • Программное управление картой
  • Рисование на карте

Предпосылки

Вам необходимо ознакомиться с приведенными ниже элементами, чтобы выполнить эту лабораторную работу. Если вы уже знакомы с работой с платформой Google Maps, перейдите к кодовой лаборатории!

Необходимые продукты платформы Google Карт

В этой лаборатории кода вы будете использовать следующие продукты платформы Google Maps:

  • Карты SDK для iOS
  • Google Maps SDK для библиотеки утилит iOS

Начало работы с платформой Google Карт

Если вы еще не использовали платформу Google Maps, следуйте руководству по началу работы с платформой Google Maps или просмотрите список воспроизведения Начало работы с платформой Google Maps , чтобы выполнить следующие шаги:

  1. Создайте платежный аккаунт.
  2. Создайте проект.
  3. Включите API и SDK платформы Google Карт (перечислены в предыдущем разделе).
  4. Сгенерируйте API-ключ.

Другие требования к этой лаборатории кода

Чтобы выполнить эту лабораторную работу, вам потребуются следующие учетные записи, службы и инструменты:

  • Аккаунт Google Cloud Platform с включенным выставлением счетов.
  • Ключ API платформы Google Maps с включенным Maps SDK для iOS.
  • Базовые знания Objective-C
  • Xcode 12.0 с целевым SDK 12.0 или более поздней версии

2. Настройте

Для шага включения, описанного ниже, вам потребуется включить Maps SDK для iOS .

Настройте платформу Google Карт

Если у вас еще нет учетной записи Google Cloud Platform и проекта с включенным выставлением счетов, ознакомьтесь с руководством по началу работы с платформой Google Maps , чтобы создать платежную учетную запись и проект.

  1. В Cloud Console щелкните раскрывающееся меню проекта и выберите проект, который вы хотите использовать для этой лаборатории кода.

  1. Включите API и SDK платформы Google Maps, необходимые для этой лаборатории кода, в Google Cloud Marketplace . Для этого выполните действия, описанные в этом видео или в этой документации .
  2. Создайте ключ API на странице учетных данных Cloud Console. Вы можете выполнить действия, описанные в этом видео или в этой документации . Для всех запросов к платформе Google Maps требуется ключ API.

Настройка стартового шаблона проекта

Прежде чем приступить к этой лаборатории кода, выполните следующие действия, чтобы загрузить шаблон начального проекта, а также полный код решения:

  1. Загрузите или разветвите репозиторий GitHub для этой кодовой лаборатории по адресу https://github.com/googlecodelabs/maps-platform-101-objc .

Проект StarterApp находится в каталоге /starter и включает в себя базовую файловую структуру, необходимую для выполнения лабораторной работы. Все, с чем вам нужно работать, находится в каталоге /starter/StarterApp .

Если вы хотите, чтобы код решения работал полностью, вы можете выполнить описанные выше действия по настройке и просмотреть решение в каталоге /solution/SolutionApp .

3. Установите Maps SDK для iOS.

Первым шагом к использованию Maps SDK для iOS является установка необходимых зависимостей. Этот процесс состоит из двух шагов: установка Maps SDK для iOS и служебной библиотеки Maps SDK для iOS из диспетчера зависимостей Cocoapods и предоставление вашего ключа API для SDK.

  1. Добавьте Maps SDK для iOS и библиотеку служебных программ Maps SDK для iOS в Podfile .

В этой лаборатории кода вы будете использовать как Maps SDK для iOS, который предоставляет все основные функции Google Maps, так и библиотеку утилит Maps iOS, которая предоставляет различные утилиты для обогащения вашей карты, включая кластеризацию маркеров.

Для начала в Xcode (или предпочитаемом вами текстовом редакторе) откройте Pods > Podfile и обновите файл, включив в него Maps SDK для iOS и зависимости Utility Library в use_frameworks! :

pod 'GoogleMaps'
pod 'Google-Maps-iOS-Utils'
  1. Установите модули Maps SDK для iOS и Maps SDK для iOS Utility Library.

Чтобы установить зависимости, запустите pod install в каталоге /starter из командной строки. Cocoapods автоматически загрузит зависимости, а также создаст StarterApp.xcworkspace . 3. После установки зависимостей откройте StarterApp.xcworkspace в Xcode, затем запустите приложение в симуляторе iPhone, нажав Command+R . Если все настроено правильно, симулятор запустится и покажет черный экран. Не волнуйтесь, вы еще ничего не построили, так что это ожидаемо! 4. Импортируйте SDK в AppDelegate.h .

Теперь, когда ваши зависимости установлены, пришло время предоставить ключ API для SDK. Первый шаг — импортировать Maps SDK для iOS в качестве зависимости, поместив следующее под оператором импорта #import "AppDelegate.h" :

@import GoogleMaps;
  1. Под оператором импорта iOS SDK объявите константу NSString со значением, установленным для вашего ключа API:
static NSString *const kMapsAPIKey = @"YOUR API KEY";
  1. Передайте ключ API в iOS SDK, вызвав provideAPIKey для GMSServices в application: didFinishLaunchingWithOptions:
- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GMSServices provideAPIKey:kMapsAPIKey];
  return YES;
}

Ваш обновленный файл AppDelegate.m теперь должен выглядеть так:

#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

Ваш Podfile должен выглядеть так:

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

Теперь, когда ваши зависимости установлены и ключ API предоставлен, вы готовы начать делать вызовы Maps SDK для iOS.

4. Показать карту

Время показать свою первую карту!

Наиболее часто используемой частью Maps SDK для iOS является класс GMSMapView , который предоставляет множество методов, позволяющих создавать экземпляры карт и управлять ими. Вот как это делается.

  1. Откройте ViewController.m .

Здесь вы будете выполнять всю оставшуюся работу для этой лаборатории кода. Вы заметите, что события жизненного цикла loadView и viewDidLoad для контроллера представления уже заглушены для вас. 2. Импортируйте Maps SDK для iOS, добавив следующее в начало файла:

@import GoogleMaps;
  1. ViewController переменную экземпляра ViewController для хранения GMSMapView .

Экземпляр GMSMapView — это основной объект, с которым вы будете работать в этой лаборатории кода, и вы будете ссылаться на него и воздействовать на него из различных методов жизненного цикла контроллера представления. Чтобы сделать его доступным, обновите реализацию ViewController , чтобы объявить переменную экземпляра для его хранения:

@implementation ViewController {
  GMSMapView *_mapView;
}
  1. В loadView создайте экземпляр GMSCameraPosition .

GMSCameraPosition определяет, где карта будет центрирована, и уровень масштабирования, который будет отображаться. Этот код вызывает метод cameraWithLatitude:longitude:zoom: для центрирования карты в Сиднее, Австралия, на широте -33,86 и долготе 151,20 с уровнем масштабирования 12:

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86 longitude:151.20 zoom:12];
  1. В loadView создайте экземпляр GMSMapView для создания экземпляра карты.

Чтобы создать новый экземпляр карты, вызовите mapWithFrame:camera: . Обратите внимание, что для фрейма установлено значение CGRectZero , которое является глобальной переменной из библиотеки iOS CGGeometry , задающей фрейм шириной 0 и высотой 0, расположенным в позиции (0,0) внутри контроллера представления. Камера устанавливается в положение камеры, которое вы только что создали.

Чтобы на самом деле отобразить карту, затем вы установите корневой вид контроллера представления на _mapview , что заставит карту отображаться в полноэкранном режиме.

_mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
self.view = _mapView;
  1. Установите GMSMapViewDelegate в контроллер представления.

Когда делегат представления карты реализован, он позволяет вам обрабатывать события от взаимодействия с пользователем в экземпляре GMSMapView , что вам понадобится на последующих шагах.

Во-первых, обновите интерфейс ViewController , чтобы он соответствовал протоколу для GMSMapViewDelegate:

@interface ViewController ()<GMSMapViewDelegate>

Затем добавьте следующее, чтобы установить GMSMapViewDelegate в ViewController .

_mapView.delegate = self;

Теперь перезагрузите приложение в симуляторе iOS ( Command+R ), и карта должна появиться!

2e6ebac422323aa6.png

Напомним, что на этом шаге вы создали экземпляр GMSMapView для отображения карты с центром в городе Сидней, Австралия.

Ваш файл ViewController.m теперь должен выглядеть так:

#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. Облачный стиль карты (необязательно)

Вы можете настроить стиль своей карты, используя облачные стили карты .

Создать идентификатор карты

Если вы еще не создали идентификатор карты со связанным с ним стилем карты, см. руководство по идентификаторам карт , чтобы выполнить следующие шаги:

  1. Создайте идентификатор карты.
  2. Свяжите идентификатор карты со стилем карты.

Добавление идентификатора карты в ваше приложение

Чтобы использовать идентификатор карты, созданный на предыдущем шаге, откройте файл ViewController.m и в методе loadView создайте объект GMSMapID и укажите идентификатор карты. Затем измените экземпляр GMSMapView , указав объект GMSMapID в качестве параметра.

ViewController.m

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

После того, как вы закончите это, запустите приложение, чтобы увидеть свою карту в выбранном вами стиле!

6. Добавьте маркеры на карту

Разработчики могут многое сделать с помощью Maps SDK для iOS, но самым популярным из них, безусловно, является размещение маркеров на карте. Маркеры позволяют отображать определенные точки на карте и являются общим элементом пользовательского интерфейса для обработки взаимодействия с пользователем. Если вы раньше использовали Карты Google, то, вероятно, знакомы с маркером по умолчанию, который выглядит так:

590815267846f166.png

На этом шаге вы узнаете, как использовать класс GMSMarker для размещения маркеров на карте.

Обратите внимание, что маркеры не могут быть размещены на карте до тех пор, пока карта не будет загружена из предыдущего шага в событии жизненного цикла loadView контроллера представления, поэтому вы выполните эти шаги в событии жизненного цикла viewDidLoad , которое вызывается после того, как представление (и карта) был загружен.

  1. Определите объект CLLocationCoordinate2D .

CLLocationCoordinate2D — это структура, предоставляемая библиотекой iOS CoreLocation , которая определяет географическое положение на заданной широте и долготе. Чтобы приступить к созданию своего первого маркера, определите объект CLLocationCoordinate2D и установите широту и долготу в центре карты. Координаты центра карты можно получить из вида карты, используя свойства camera.target.latitude и camera.target.longitude .

CLLocationCoordinate2D mapCenter = CLLocationCoordinate2DMake(_mapView.camera.target.latitude, _mapView.camera.target.longitude);
  1. Создайте экземпляр GMSMarker .

Maps SDK для iOS предоставляет класс GMSMarker . Каждый экземпляр GMSMarker представляет отдельный маркер на карте и создается путем вызова markerWithPosition: и передачи ему объекта CLLocationCoordinate2D , чтобы указать SDK, где разместить маркер на карте .

GMSMarker *marker = [GMSMarker markerWithPosition:mapCenter];
  1. Установите пользовательский значок маркера.

Красная булавка по умолчанию для Google Maps — это здорово, но и настройка вашей карты тоже! К счастью, с Maps SDK для iOS использовать собственный маркер очень просто. Вы заметите, что проект StarterApp включает в себя изображение под названием «custom_pin.png», которое вы можете использовать, но вы можете использовать любое изображение, которое захотите.

Чтобы установить пользовательский маркер, задайте для свойства icon маркера экземпляр UIImage .

marker.icon = [UIImage imageNamed:@"custom_pin.png"];
  1. Отрисовка маркера на карте.

Ваш маркер создан, но вы заметите, что его нет на карте. Для этого установите для свойства map экземпляра GMSMarker экземпляр GMSMapView .

marker.map = _mapView;

Теперь перезагрузите приложение и вот ваша первая карта с маркером!

a4ea8724f8c5ba20.png

Напомним, что в этом разделе вы создали экземпляр класса GMSMarker и применили его к представлению карты для отображения маркера на карте. Ваше обновленное событие жизненного цикла viewDidLoad в ViewController.m теперь должно выглядеть так:

- (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. Включите кластеризацию маркеров

При использовании большого количества маркеров или маркеров, которые находятся в непосредственной близости друг от друга, вы можете столкнуться с проблемой, когда маркеры перекрываются или кажутся слишком скученными, что усложняет взаимодействие с пользователем. Например, если два маркера расположены очень близко друг к другу, может получиться такая ситуация:

6e39736160c6bce4.png

Здесь вступает в действие кластеризация маркеров. Кластеризация маркеров — еще одна часто реализуемая функция, которая группирует близлежащие маркеры в один значок, который меняется в зависимости от уровня масштабирования, например:

4abb38cd97cab3f1.png

Алгоритм кластеризации маркеров делит видимую область карты на сетку, затем группирует значки, находящиеся в одной ячейке. К счастью, вам не нужно ни о чем беспокоиться, так как команда Google Maps Platform создала полезную служебную библиотеку с открытым исходным кодом под названием Google Maps SDK for iOS Utility Library. Эта библиотека, среди прочего, автоматически обрабатывает кластеризацию маркеров. Подробнее о кластеризации маркеров можно прочитать в документации по платформе Google Maps или ознакомиться с исходным кодом iOS Utility Library на GitHub .

  1. Добавьте на карту гораздо больше маркеров.

Чтобы увидеть кластеризацию маркеров в действии, вам нужно иметь много маркеров на карте. Чтобы упростить эту задачу, в стартовом проекте в LocationGenerator.m для вас предусмотрен удобный генератор маркеров.

Чтобы добавить на карту столько маркеров, сколько хотите, просто вызовите generateMarkersNear:count: в жизненном цикле viewDidLoad контроллера представления под кодом из предыдущего шага. Метод создает количество маркеров, указанное в count в случайных местах вокруг координат, указанных в объекте CLLocationCoordinate2D . В этом случае вы можете просто передать ему созданную ранее переменную mapCenter . Маркеры возвращаются в NSArray .

NSArray<GMSMarker *> *markerArray = [LocationGenerator generateMarkersNear:mapCenter count:100];
  1. Импортируйте SDK Google Maps для библиотеки утилит iOS.

Чтобы добавить служебную библиотеку Maps iOS в качестве зависимости к вашему проекту, добавьте следующее в список зависимостей в верхней части ViewController.m :

@import GoogleMapsUtils;
  1. Настройте кластеризатор маркеров.

Чтобы использовать кластеризатор маркеров, вам необходимо предоставить три вещи для настройки его работы: алгоритм кластеризации, генератор значков и средство визуализации. Алгоритм определяет поведение кластеризации маркеров, например расстояние между маркерами, которое нужно включить в один и тот же кластер. Генератор значков предоставляет значки кластера для использования на разных уровнях масштабирования. Средство визуализации обрабатывает фактическую визуализацию значков кластера на карте.

Вы можете написать все это с нуля, если хотите, но служебная библиотека Maps iOS предоставляет реализации по умолчанию, чтобы упростить процесс. Просто добавьте следующее:

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

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

id<GMUClusterRenderer> renderer = [[GMUDefaultClusterRenderer alloc] initWithMapView:_mapView clusterIconGenerator:clusterIconGenerator];
  1. Создайте экземпляр GMUClusterManager .

GMUClusterManager — это класс, который реализует кластеризацию маркеров с использованием указанного вами алгоритма, генератора значков и средства визуализации. Чтобы создать средство визуализации и сделать его доступным для представления карты, сначала добавьте переменную экземпляра в реализацию ViewController для хранения экземпляра диспетчера кластера:

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

Затем создайте экземпляр GMUClusterManager в событии жизненного цикла viewDidLoad :

_clusterManager = [[GMUClusterManager alloc] initWithMap:_mapView algorithm:algorithm renderer:renderer];
  1. Добавьте маркеры и запустите кластеризатор маркеров.

Теперь, когда ваш экземпляр кластеризатора маркеров сконфигурирован, все, что вам нужно сделать, это передать менеджеру кластера массив маркеров для кластеризации, вызвав addItems: затем запустить кластеризатор, вызвав cluster .

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

Перезагрузите приложение, и теперь вы должны увидеть массу маркеров, хорошо сгруппированных. Идите вперед и поэкспериментируйте с различными уровнями масштабирования, сжимая и масштабируя карту, чтобы увидеть, как кластеры маркеров адаптируются при увеличении/уменьшении масштаба.

c49383b07752bfc4.png

Напомним, что на этом шаге вы настроили экземпляр кластеризатора маркеров из SDK Google Maps для служебной библиотеки iOS, а затем использовали его для кластеризации 100 маркеров на карте. Ваше событие жизненного цикла viewDidLoad в ViewController.m теперь должно выглядеть так:

- (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. Добавьте взаимодействие с пользователем

Теперь у вас есть красивая карта, на которой отображаются маркеры и используется кластеризация маркеров. На этом шаге вы добавите некоторую дополнительную обработку взаимодействия с пользователем с помощью GMSMapViewDelegate , который вы ранее установили для контроллера представления, чтобы улучшить взаимодействие с пользователем вашей карты.

Maps SDK для iOS предоставляет комплексную систему событий, реализованную через делегат представления карты, который включает обработчики событий, позволяющие выполнять код при различных взаимодействиях с пользователем. Например, делегат представления карты включает в себя методы, которые позволяют инициировать выполнение кода для таких взаимодействий, как щелчок пользователя по карте и маркерам, панорамирование вида карты, увеличение и уменьшение масштаба и многое другое.

На этом шаге вы программно сделаете панорамирование карты таким образом, чтобы оно центрировалось на любом маркере, на который нажал пользователь.

  1. Реализуйте прослушиватель маркеров.

mapView:didTapMarker вызывается каждый раз, когда пользователь касается одного из ранее созданных вами маркеров, а также каждый раз, когда пользователь касается кластера маркеров (внутренне кластеры маркеров реализованы как экземпляр GMSMarker ).

Чтобы реализовать прослушиватель событий, начните с его заглушки в нижней части ViewController.m перед оператором end .

Вы заметите, что метод возвращает NO . Это указывает iOS SDK продолжать выполнять функции GMSMarker по умолчанию, такие как отображение информационного окна , если оно настроено, после выполнения вашего кода обработчика событий.

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

  return NO;
}
  1. Обрабатывайте событие касания и анимируйте камеру, чтобы центрировать карту при касании маркера или кластера маркеров.

При вызове mapView:didTapMarker передает экземпляр GMSMarker , который был использован, что позволяет обрабатывать его в коде. Вы можете использовать этот экземпляр для центрирования карты, вызвав animateToLocation: в представлении карты из обработчика событий и передав ему положение экземпляра маркера, которое доступно в свойстве position .

[_mapView animateToLocation:marker.position];
  1. Увеличивайте кластер маркеров при нажатии.

Обычный шаблон UX — увеличение кластеров маркеров при нажатии на них. Это позволяет пользователям просматривать сгруппированные маркеры, поскольку кластер будет расширяться при более низких уровнях масштабирования.

Как отмечалось ранее, значок кластера маркеров на самом деле является просто реализацией GMSMarker с пользовательским значком. Так как же узнать, был ли нажат маркер или кластер маркеров? Когда диспетчер кластеризатора маркеров создает новый значок кластера, он реализует экземпляр GMSMarker для соответствия протоколу под названием GMUCluster. Вы можете использовать условие, чтобы проверить, соответствует ли маркер, переданный в обработчик события, этому протоколу.

Как только вы программно узнаете, что кластер был задействован, вы можете вызвать animateToZoom: для экземпляра представления карты и установить масштаб на текущий уровень масштабирования плюс один. Текущий уровень масштабирования доступен в экземпляре представления карты в свойстве camera.zoom .

Также обратите внимание, как приведенный ниже код возвращает YES . Это сообщает обработчику событий, что вы завершили обработку события и больше не выполняете какой-либо код в обработчике. Одной из причин для этого является предотвращение выполнения базовым объектом GMSMarker остальной части своего поведения по умолчанию, например отображения информационного окна, что не имело бы особого смысла в случае касания значка кластера.

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

Теперь перезагрузите приложение и коснитесь некоторых маркеров и кластеров маркеров. При нажатии любого из них карта центрируется на выбранном элементе. При касании кластера маркеров карта также увеличивается на один уровень, а кластер маркеров расширяется, показывая маркеры, сгруппированные под ним.

Напомним, что на этом шаге вы внедрили прослушиватель касания маркера и обработали событие, чтобы центрировать на нажатом элементе и увеличить масштаб, если этот элемент является значком кластера маркера.

Ваш mapView:didTapMarker должен выглядеть так:

- (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. Рисуйте на карте

Итак, вы создали карту Сиднея, которая показывает маркеры в 100 случайных точках и обрабатывает взаимодействие с пользователем. На последнем этапе этой лабораторной работы вы будете использовать функции рисования Maps SDK для iOS, чтобы добавить дополнительную полезную функцию к вашей карте.

Представьте, что эта карта будет использоваться пользователями, которые хотят изучить город Сидней. Полезной функцией будет визуализация радиуса вокруг маркера при нажатии на него. Это позволит пользователю легко понять, какие другие пункты назначения находятся в нескольких минутах ходьбы от маркера, по которому щелкнули.

iOS SDK включает набор функций для рисования фигур на карте, таких как квадраты, многоугольники, линии и круги. Затем вы визуализируете круг, чтобы показать радиус 800 метров (приблизительно полмили) вокруг маркера при щелчке по нему.

  1. Добавьте переменную экземпляра _circ в реализацию ViewController.

Эта переменная экземпляра будет использоваться для сохранения последнего нарисованного круга, чтобы его можно было уничтожить до того, как будет нарисован другой. В конце концов, это было бы не очень полезно для пользователя и выглядело бы довольно уродливо, если бы вокруг каждого нажатого маркера был нарисован круг!

Для этого обновите реализацию ViewController следующим образом:

@implementation ViewController {
  GMSMapView *_mapView;
  GMUClusterManager *_clusterManager;
  GMSCircle *_circ;
}
  1. Нарисуйте круг, когда маркер нажат.

В нижней части mapView:didTapMarker добавьте следующий код, чтобы создать экземпляр класса GMSCircle из iOS SDK для рисования нового круга радиусом 800 метров, вызвав circleWithPosition:radius: и передав ему положение нажатого маркера, как и вы сделали выше, когда центрировали карту.

_circ = [GMSCircle circleWithPosition:marker.position radius:800];
  1. Стиль круга.

По умолчанию GMSCircle рисует круг с черной обводкой и прозрачной заливкой. Это будет работать для отображения радиуса, но выглядит не очень хорошо, и его немного трудно увидеть. Затем дайте кругу цвет заливки, чтобы улучшить стиль, назначив UIColor свойству fillColor круга. Следующий код добавит серую заливку с прозрачностью 50%:

_circ.fillColor = [UIColor colorWithRed: 0.67 green: 0.67 blue: 0.67 alpha: 0.5];
  1. Отобразите круг на карте.

Как и при создании маркеров ранее, вы заметите, что простое создание экземпляра GMSCircle не приводит к его отображению на карте. Для этого просто назначьте экземпляр представления map свойству карты круга.

_circ.map = _mapView;
  1. Удалите все ранее визуализированные круги.

Как отмечалось ранее, было бы не очень удобно просто продолжать добавлять круги на карту. Чтобы удалить круг, отображаемый предыдущим событием касания, установите для свойства map _circ значение nil в верхней части mapView:didTapMarker .

_circ.map = nil;

Перезагрузите приложение и нажмите на маркер. Вы должны увидеть новый круг, нарисованный всякий раз, когда вы касаетесь маркера, и любой ранее визуализированный круг удаляется.

342520482a888519.png

Напомним, что на этом шаге вы использовали класс GMSCircle для визуализации круга при касании маркера.

Ваш метод mapView:didTapMarker должен выглядеть так:

- (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. Поздравления

Вы успешно создали свое первое приложение для iOS с помощью платформы Google Maps, включая загрузку Maps SDK для iOS, загрузку карты, работу с маркерами, управление и рисование на карте, а также добавление взаимодействия с пользователем.

Чтобы увидеть завершенный код, проверьте готовый проект в каталоге /solution .

Что дальше?

В этой лаборатории кода мы рассмотрели только основы того, что вы можете делать с помощью Maps SDK для iOS. Затем попробуйте добавить на карту некоторые из этих объектов:

  • Измените тип карты, чтобы отображались спутниковые, гибридные карты и карты местности.
  • Настройте другие взаимодействия с пользователем , такие как управление масштабированием и картой.
  • Добавьте информационные окна для отображения информации при нажатии маркеров.
  • Ознакомьтесь с Places SDK для iOS , чтобы добавить в свое приложение богатые функции и данные о местах на платформе Google Maps.

Чтобы узнать больше о том, как работать с платформой Google Карт в Интернете, перейдите по этим ссылкам: