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

Выберите платформу: 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
      

Цель-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
      

Цель-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
      

Цель-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
      

Цель-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
      

Цель-C

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

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

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

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

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

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

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

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

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

• Цель-C
• Быстрый

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

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

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

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

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

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

См. примеры кода для получения информации о загрузке и запуске этих примеров.