Информационные окна

Выберите платформу: Android iOS JavaScript

Информационное окно позволяет отображать информацию пользователю при нажатии на маркер.

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

Содержимое информационного окна определяется свойствами title и snippet маркера. Щелчок по маркеру не отображает информационное окно, если оба свойства title и snippet пусты или nil .

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

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

Добавить информационное окно

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

Быстрый

let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let london = GMSMarker(position: position)
london.title = "London"
london.map = mapView
      

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *london = [GMSMarker markerWithPosition:position];
london.title = @"London";
london.map = mapView;
      

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

Быстрый

london.title = "London"
london.snippet = "Population: 8,174,100"
london.map = mapView
      

Objective-C

london.title = @"London";
london.snippet = @"Population: 8,174,100";
london.map = mapView;
      

Показать/скрыть информационное окно

Информационные окна предназначены для реагирования на события касания маркера пользователем. Вы можете программно отобразить или скрыть информационное окно, установив свойство selectedMarker для GMSMapView :

• Задайте selectedMarker имя маркера, чтобы отобразить его.
• Чтобы скрыть selectedMarker , установите для него значение nil .

Быстрый

london.title = "London"
london.snippet = "Population: 8,174,100"
london.map = mapView
// Show marker
mapView.selectedMarker = london
// Hide marker
mapView.selectedMarker = nil
      

Objective-C

london.title = @"London";
london.snippet = @"Population: 8,174,100";
london.map = mapView;
// Show marker
mapView.selectedMarker = london;
// Hide marker
mapView.selectedMarker = nil;
      

Настройка автоматического обновления информационного окна

Установите для параметра tracksInfoWindowChanges маркера значение YES или true , если вы хотите, чтобы новые свойства или содержимое информационного окна отображались немедленно при изменении, а не ждали, пока информационное окно скроется и снова отобразится. Значение по умолчанию — NO или false .

Быстрый

london.tracksInfoWindowChanges = true
      

Objective-C

london.tracksInfoWindowChanges = YES;
      

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

• Если вам необходимо внести ряд изменений, вы можете изменить свойство на YES а затем снова на NO .
• Когда анимация запущена или содержимое загружается асинхронно, следует оставить свойство установленным на YES до тех пор, пока действия не будут завершены.

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

Изменение положения информационного окна

Информационное окно рисуется ориентированным относительно экрана устройства, центрированным над связанным с ним маркером. Вы можете изменить положение информационного окна относительно маркера, установив свойство infoWindowAnchor . Это свойство принимает CGPoint , определенное как смещение (x,y), где x и y находятся в диапазоне от 0,0 до 1,0. Смещение по умолчанию равно (0,5, 0,0), то есть центр вверху. Установка смещения infoWindowAnchor полезна для выравнивания информационного окна относительно пользовательского значка.

Быстрый

london.infoWindowAnchor = CGPoint(x: 0.5, y: 0.5)
london.icon = UIImage(named: "house")
london.map = mapView
      

Objective-C

london.infoWindowAnchor = CGPointMake(0.5, 0.5);
london.icon = [UIImage imageNamed:@"house"];
london.map = mapView;
      

Обработка событий в информационных окнах

Вы можете прослушивать следующие события информационного окна:

• mapView:markerInfoWindow: — Вызывается, когда маркер собирается быть выбранным. Может опционально возвращать пользовательское информационное окно, как UIView , для использования с маркером. См. Пользовательские информационные окна ниже для получения дополнительной информации.

• mapView:markerInfoContents: — Вызывается, когда mapView:markerInfoWindow возвращает nil.

• mapView:didCloseInfoWindowOfMarker: — Вызывается при закрытии информационного окна маркера.

• mapView:didLongPressInfoWindowOfMarker: — Вызывается после длительного нажатия на информационное окно маркера.

Для прослушивания событий необходимо реализовать протокол GMSMapViewDelegate . См. руководство по событиям и список методов GMSMapViewDelegate .

GitHub содержит примеры, демонстрирующие, как обрабатывать события информационного окна:

• Objective-C
• Быстрый

Пользовательские информационные окна

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

Убедитесь, что ваш ViewController реализует протокол GMSIndoorDisplayDelegate и определяет прослушиватель для события mapView:markerInfoWindow:. Этот прослушиватель событий вызывается, когда маркер собирается быть выбранным, и позволяет вам вернуть экземпляр вашего пользовательского класса UIView для определения пользовательского информационного окна, используемого маркером.

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

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

Примеры кода на GitHub , предоставленные вместе с Maps SDK для iOS, включают примеры пользовательских информационных окон. Например, см. определение MarkerInfoWindowViewController.m (Objective-C) или MarkerInfoWindowViewController.swift (Swift).

Информацию о загрузке и запуске этих примеров см. в примерах кода .