Добавьте карту в свое приложение iOS (Swift)

Добавьте карту в свое приложение iOS (Swift)

О практической работе

Последнее обновление: мая 11, 2022

Авторы: Angela Yu

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

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

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

Предпосылки

• Базовые знания Swift и iOS-разработки.

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

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

Что вам понадобится

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

• Xcode 12.0 или выше с целевым SDK 12.0 или выше.
• Кокоаподы установлены.
• Аккаунт Google Cloud Platform с включенным выставлением счетов (см. следующий шаг).
• Проект в Cloud Console с включенным Maps SDK для iOS (см. следующий шаг).

2. Настроить

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

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

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

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

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

Быстрый старт

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

1. Клонируйте репозиторий, если у вас установлен git .

git clone https://github.com/googlemaps/codelab-maps-platform-101-swift.git

Либо щелкните Дайте мне код , чтобы загрузить исходный код.

Дайте мне код

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

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

3. Установите 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 (или предпочитаемом вами текстовом редакторе) откройте Podfile и обновите файл, включив в него Maps SDK для iOS и зависимости Utility Library под комментарием # Pods for StarterApp :

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

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

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

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

target 'StarterApp' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!

  # Pods for StarterApp
  pod 'GoogleMaps', '6.1.0'
  pod 'Google-Maps-iOS-Utils', '3.4.0'
end

2. Установите модули Maps SDK для iOS и Maps SDK для iOS Utility Library.

Чтобы установить зависимости, запустите pod install в каталоге /starter из командной строки. Cocoapods автоматически загружает зависимости и создает StarterApp.xcworkspace .

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

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

import GoogleMaps

5. Передайте свой ключ API в iOS SDK, вызвав provideAPIKey для GMSServices в application: didFinishLaunchingWithOptions:

  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

    // Override point for customization after application launch.
    GMSServices.provideAPIKey("YOUR_API_KEY")

    return true
  }

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

import UIKit
import GoogleMaps

@main
class AppDelegate: UIResponder, UIApplicationDelegate {
  var window: UIWindow?

  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

    // Override point for customization after application launch.
    GMSServices.provideAPIKey("YOUR_API_KEY")

    return true
  }

}

Замените YOUR_API_KEY ключом API, который вы создали в Cloud Console.

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

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

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

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

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

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

2. Импортируйте Maps SDK для iOS, добавив это в начало файла:

import GoogleMaps

3. ViewController переменную экземпляра ViewController для хранения GMSMapView .

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

class ViewController: UIViewController {

  private var mapView: GMSMapView!

  ...
}

4. В loadView создайте экземпляр GMSCameraPosition .

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

let camera:GMSCameraPosition = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 12)

5. В loadView создайте экземпляр GMSMapView для создания экземпляра карты.

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

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

    mapView = GMSMapView(frame: .zero, camera: camera)
    self.view = mapView

6. Установите GMSMapViewDelegate в контроллер представления.

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

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

class ViewController: UIViewController, GMSMapViewDelegate

Затем добавьте это в функцию loadView , чтобы установить GMSMapViewDelegate в ViewController .

    mapView.delegate = self

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

Рис. 1. Приложение для iOS с картой Google.

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

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

import UIKit
import GoogleMaps

class ViewController: UIViewController, GMSMapViewDelegate {

  private var mapView: GMSMapView!

  override func loadView() {

    // Load the map at set latitude/longitude and zoom level
    let camera:GMSCameraPosition = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 11)

    mapView = GMSMapView(frame: .zero, camera: camera)
    self.view = mapView
    mapView.delegate = self
  }

  override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view.
  }

}

5. Стиль карты (необязательно)

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

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

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

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

Примечание. Использование идентификатора карты в Maps SDK для Android или Maps SDK для iOS инициирует загрузку карты, за которую взимается SKU Dynamic Maps. Дополнительную информацию см. в разделе Оплата Google Maps .

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

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

ViewController.swift

  override func loadView() {

    // Load the map at set latitude/longitude and zoom level
    let camera:GMSCameraPosition = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 11)
    let mapID = GMSMapID(identifier: "YOUR_MAP_ID")

    mapView = GMSMapView(frame: .zero, mapID: mapID, camera: camera)
    self.view = mapView
    mapView.delegate = self
  }

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

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

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

Рисунок 2. Карта с красными маркерами.

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

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

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

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

    // Add a single marker with a custom icon
    let mapCenter = CLLocationCoordinate2DMake(mapView.camera.target.latitude, mapView.camera.target.longitude)

2. Создайте экземпляр GMSMarker .

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

    let marker = GMSMarker(position: mapCenter)

3. Установите пользовательский значок маркера.

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

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

    marker.icon = UIImage(named: "custom_pin.png")

4. Отрисовка маркера на карте.

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

    marker.map = mapView

Теперь перезагрузите приложение и созерцайте свою первую карту с маркером, как показано на рисунке 3!

Рис. 3. Приложение iOS с Google Maps с красным маркером в центре.

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

  override func viewDidLoad() {
    super.viewDidLoad()

    // Add a single marker with a custom icon
    let mapCenter = CLLocationCoordinate2DMake(mapView.camera.target.latitude, mapView.camera.target.longitude)
    let marker = GMSMarker(position: mapCenter)

    marker.icon = UIImage(named: "custom_pin.png")
    marker.map = mapView
  }

7. Включить кластеризацию маркеров

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

Рисунок 4. Два маркера очень близко друг к другу.

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

Рисунок 5. Пример маркеров, сгруппированных в один значок.

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

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

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

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

    // Generate many markers
    let markerArray = MarkerGenerator(near: mapCenter, count: 100).markerArray

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

    // Comment the following code out if using the marker clusterer
    // to manage markers instead.
    for marker in markerArray {
      marker.map = mapView
    }

2. Импортируйте SDK Google Maps для библиотеки утилит iOS.

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

import GoogleMapsUtils

3. Настройте кластеризатор маркеров.

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

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

    // Set up the cluster manager with a supplied icon generator and renderer.
    let algorithm = GMUNonHierarchicalDistanceBasedAlgorithm()
    let iconGenerator = GMUDefaultClusterIconGenerator()
    let renderer = GMUDefaultClusterRenderer(mapView: mapView, clusterIconGenerator: iconGenerator)

4. Создайте экземпляр GMUClusterManager .

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

class ViewController: UIViewController, GMSMapViewDelegate {

  private var mapView: GMSMapView!
  private var clusterManager: GMUClusterManager!
}

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

    clusterManager = GMUClusterManager(map: mapView, algorithm: algorithm, renderer: renderer)

5. Добавьте маркеры и запустите кластеризатор маркеров.

Теперь, когда ваш экземпляр кластеризатора маркеров настроен, передайте диспетчеру кластера массив маркеров для кластеризации, вызвав add(items:) , а затем запустите кластеризатор, вызвав cluster .

    clusterManager.setMapDelegate(self)
    clusterManager.add(markerArray)
    clusterManager.cluster()

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

Рис. 6. Приложение для iOS с Google Maps и сгруппированными маркерами.

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

  override func viewDidLoad() {
    super.viewDidLoad()

    // Add a single marker with a custom icon
    let mapCenter = CLLocationCoordinate2DMake(mapView.camera.target.latitude, mapView.camera.target.longitude)
    let marker = GMSMarker(position: mapCenter)

    marker.icon = UIImage(named: "custom_pin.png")
    marker.map = mapView

    // Generate many markers
    let markerArray = MarkerGenerator(near: mapCenter, count: 100).markerArray
    // Comment the following code out if using the marker clusterer
    // to manage markers instead.
    //    for marker in markerArray {
    //      marker.map = mapView
    //    }

    // Set up the cluster manager with a supplied icon generator and renderer.
    let algorithm = GMUNonHierarchicalDistanceBasedAlgorithm()
    let iconGenerator = GMUDefaultClusterIconGenerator()
    let renderer = GMUDefaultClusterRenderer(mapView: mapView, clusterIconGenerator: iconGenerator)
    clusterManager = GMUClusterManager(map: mapView, algorithm: algorithm, renderer: renderer)

    clusterManager.setMapDelegate(self)
    clusterManager.add(markerArray)
    clusterManager.cluster()
  }

8. Добавить взаимодействие с пользователем

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

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

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

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

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

Чтобы реализовать прослушиватель событий, начните с заглушки в нижней части ViewController.swift перед закрывающей фигурной скобкой.

  func mapView(_ mapView: GMSMapView, didTap marker: GMSMarker) -> Bool {

    return false
  }

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

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

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

    // Animate to the marker
    mapView.animate(toLocation: marker.position)

3. Увеличивайте кластер маркеров при нажатии.

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

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

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

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

    // If the tap was on a marker cluster, zoom in on the cluster
    if let _ = marker.userData as? GMUCluster {
      mapView.animate(toZoom: mapView.camera.zoom + 1)
      return true
    }

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

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

Ваш mapView(_:didTap:) должен выглядеть так:

  func mapView(_ mapView: GMSMapView, didTap marker: GMSMarker) -> Bool {

    // Animate to the marker
    mapView.animate(toLocation: marker.position)

    // If the tap was on a marker cluster, zoom in on the cluster
    if let _ = marker.userData as? GMUCluster {
      mapView.animate(toZoom: mapView.camera.zoom + 1)
      return true
    }

    return false
  }

9. Рисовать на карте

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

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

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

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

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

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

class ViewController: UIViewController, GMSMapViewDelegate {

  private var mapView: GMSMapView!
  private var clusterManager: GMUClusterManager!
  private var circle: GMSCircle? = nil
  ...
}

2. Нарисуйте круг, когда маркер нажат.

В нижней части mapView(_:didTap:) прямо над оператором return false добавьте показанный здесь код, чтобы создать экземпляр класса GMSCircle из iOS SDK для рисования нового круга радиусом 800 метров с помощью вызова GMSCircle(position:radius:) и передать ему положение нажатого маркера, как вы это делали, когда центрировали карту.

    // Draw a new circle around the tapped marker
    circle = GMSCircle(position: marker.position, radius: 800)

3. Стиль круга.

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

    circle?.fillColor = UIColor(red: 0.67, green: 0.67, blue: 0.67, alpha: 0.5)

4. Отобразите круг на карте.

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

    circle?.map = mapView

5. Удалите все ранее визуализированные круги.

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

    // Clear previous circles
    circle?.map = nil

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

Рис. 7. Окружность, нарисованная вокруг маркера постукивания.

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

Метод mapView(_:didTap:) должен выглядеть так:

  func mapView(_ mapView: GMSMapView, didTap marker: GMSMarker) -> Bool {

    // Clear previous circles
    circle?.map = nil

    // Animate to the marker
    mapView.animate(toLocation: marker.position)

    // If the tap was on a marker cluster, zoom in on the cluster
    if let _ = marker.userData as? GMUCluster {
      mapView.animate(toZoom: mapView.camera.zoom + 1)
      return true
    }

    // Draw a new circle around the tapped marker
    circle = GMSCircle(position: marker.position, radius: 800)
    circle?.fillColor = UIColor(red: 0.67, green: 0.67, blue: 0.67, alpha: 0.5)
    circle?.map = mapView
    return false
  }

10. Поздравления

Вы успешно создали приложение для iOS с интерактивной картой Google.

Что вы узнали

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

Что дальше?

• Изучите или разветвите репозиторий GitHub с примерами и демонстрационными примерами maps-sdk-for-ios-samples , чтобы получить больше вдохновения.
• Изучите другие лабораторные коды Swift для создания приложений iOS с помощью платформы Google Maps.
• Помогите нам создать наиболее полезный для вас контент, ответив на вопрос ниже:

Какие еще кодлабы вы хотели бы увидеть?

Визуализация данных на картах Подробнее о настройке стиля моих карт Создание 3D-взаимодействий на картах

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