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

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

• 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).

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