Маркеры

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

Маркеры обозначают отдельные местоположения на карте.

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

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

Добавление маркера

Чтобы добавить маркер, создайте объект GMSMarker, включающий position и title, и задайте его map.

В следующем примере показано, как добавить маркер в существующий объект GMSMapView. Маркер создается в точке с координатами 10,10, а при нажатии на него в информационном окне появляется строка Hello world.

Swift

let position = CLLocationCoordinate2D(latitude: 10, longitude: 10)
let marker = GMSMarker(position: position)
marker.title = "Hello World"
marker.map = mapView

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(10, 10);
GMSMarker *marker = [GMSMarker markerWithPosition:position];
marker.title = @"Hello World";
marker.map = mapView;

Вы можете анимировать добавление новых маркеров на карту, задав для свойства marker.appearAnimation одно из следующих значений:

  • kGMSMarkerAnimationPop, чтобы маркер появлялся из groundAnchor при добавлении.
  • kGMSMarkerAnimationFadeIn – маркер появляется постепенно.

Удаление маркера

Чтобы удалить маркер с карты, установите для свойства map объекта GMSMarker значение nil. Вы также можете удалить все оверлеи (включая маркеры), которые в данный момент находятся на карте, вызвав метод GMSMapView clear.

Swift

let camera = GMSCameraPosition.camera(
  withLatitude: -33.8683,
  longitude: 151.2086,
  zoom: 6
)
let options = GMSMapViewOptions()
options.camera = camera
let mapView = GMSMapView(options: options)
// ...
mapView.clear()

Objective-C

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.8683
                                                        longitude:151.2086
                                                             zoom:6];
GMSMapViewOptions *options = [[GMSMapViewOptions alloc] init];
options.camera = camera;
mapView = [[GMSMapView alloc] initWithOptions:options];
// ...
[mapView clear];

Если вы предполагаете, что в дальнейшем вам понадобится изменить маркер, сохраните возможность обращаться к объекту GMSMarker. Меняя свойства этого объекта, можно корректировать внешний вид маркера.

Swift

let position = CLLocationCoordinate2D(latitude: 10, longitude: 10)
let marker = GMSMarker(position: position)
marker.map = mapView
// ...
marker.map = nil

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(10, 10);
GMSMarker *marker = [GMSMarker markerWithPosition:position];
marker.map = mapView;
// ...
marker.map = nil;

Изменение цвета маркера

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

Swift

marker.icon = GMSMarker.markerImage(with: .black)

Objective-C

marker.icon = [GMSMarker markerImageWithColor:[UIColor blackColor]];

Настройка значка маркера

Если вы хотите изменить стандартное изображение маркера, вы можете задать собственный значок, используя свойство маркера icon или iconView. Если задано свойство iconView, API игнорирует свойство icon.

С помощью свойства маркера icon.

Приведенный ниже фрагмент создает маркер с пользовательским значком, указанным в виде UIImage в свойстве icon. Значок установлен в г. Лондон, Англия. В этом фрагменте предполагается, что в вашем приложении есть изображение с названием house.png.

Swift

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

Objective-C

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

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

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

С помощью свойства маркера iconView.

В следующем фрагменте кода создается маркер с пользовательским значком, для чего задается свойство маркера iconView, и анимируется изменение цвета маркера. (предполагается, что в приложении содержится графический файл с названием house.png).

Swift

import CoreLocation
import GoogleMaps

class MarkerViewController: UIViewController, GMSMapViewDelegate {
  var mapView: GMSMapView!
  var london: GMSMarker?
  var londonView: UIImageView?

  override func viewDidLoad() {
    super.viewDidLoad()

    let camera = GMSCameraPosition.camera(
      withLatitude: 51.5,
      longitude: -0.127,
      zoom: 14
    )
    let options = GMSMapViewOptions()
    options.camera = camera
    let mapView = GMSMapView(options: options)
    view = mapView

    mapView.delegate = self

    let house = UIImage(named: "House")!.withRenderingMode(.alwaysTemplate)
    let markerView = UIImageView(image: house)
    markerView.tintColor = .red
    londonView = markerView

    let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
    let marker = GMSMarker(position: position)
    marker.title = "London"
    marker.iconView = markerView
    marker.tracksViewChanges = true
    marker.map = mapView
    london = marker
  }

  func mapView(_ mapView: GMSMapView, idleAt position: GMSCameraPosition) {
    UIView.animate(withDuration: 5.0, animations: { () -> Void in
      self.londonView?.tintColor = .blue
    }, completion: {(finished) in
      // Stop tracking view changes to allow CPU to idle.
      self.london?.tracksViewChanges = false
    })
  }
}

Objective-C

@import CoreLocation;
@import GoogleMaps;

@interface MarkerViewController : UIViewController <GMSMapViewDelegate>
@property (strong, nonatomic) GMSMapView *mapView;
@end

@implementation MarkerViewController {
  GMSMarker *_london;
  UIImageView *_londonView;
}

- (void)viewDidLoad {
  [super viewDidLoad];

  GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:51.5
                                                          longitude:-0.127
                                                               zoom:14];
  GMSMapViewOptions *options = [[GMSMapViewOptions alloc] init];
  options.camera = camera;
  _mapView = [[GMSMapView alloc] initWithOptions:options];
  self.view = _mapView;

  _mapView.delegate = self;

  UIImage *house = [UIImage imageNamed:@"House"];
  house = [house imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
  _londonView = [[UIImageView alloc] initWithImage:house];
  _londonView.tintColor = [UIColor redColor];

  CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
  _london = [GMSMarker markerWithPosition:position];
  _london.title = @"London";
  _london.iconView = _londonView;
  _london.tracksViewChanges = YES;
  _london.map = self.mapView;
}

- (void)mapView:(GMSMapView *)mapView idleAtCameraPosition:(GMSCameraPosition *)position {
  [UIView animateWithDuration:5.0
                   animations:^{
    self->_londonView.tintColor = [UIColor blueColor];
  }
                   completion:^(BOOL finished) {
    // Stop tracking view changes to allow CPU to idle.
    self->_london.tracksViewChanges = NO;
  }];
}

@end

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

При использовании iconView учитывайте следующее:

  • Если для параметра tracksViewChanges задано значение YES, UIView может потреблять много ресурсов, что приведет к повышенному расходу заряда батареи. Для сравнения, один кадр UIImage статичен и не требует повторного рендеринга.
  • Если на экране много маркеров, у каждого из которых есть свой объект UIView, и все они одновременно отслеживают изменения, у некоторых устройств могут возникнуть проблемы с отрисовкой карты.
  • Объект iconView не реагирует на действия пользователя, поскольку является снимком экрана.
  • Представление ведет себя так, как будто для параметра clipsToBounds задано значение YES, независимо от его фактического значения. Вы можете применять преобразования, которые работают за пределами границ, но рисуемый объект должен находиться в пределах границ объекта. Все преобразования и сдвиги отслеживаются и применяются. Короче говоря, подпредставления должны содержаться в представлении.
  • Чтобы использовать -copyWithZone: в GMSMarker, сначала скопируйте GMSMarker, а затем задайте новый экземпляр iconView в копии. UIView не поддерживает NSCopying, поэтому не может скопировать iconView.

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

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

Как изменить прозрачность маркера

Для изменения прозрачности маркера можно использовать свойство opacity. Непрозрачность следует указывать как число от 0.0 до 1.0 с плавающей точкой, где 0 – полная прозрачность, а 1 – полная непрозрачность.

Swift

marker.opacity = 0.6

Objective-C

marker.opacity = 0.6;

Вы можете анимировать прозрачность маркера с помощью Core Animation, используя GMSMarkerLayer.

Создание плоского маркера

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

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

Чтобы изменить ориентацию маркера, установите для свойства flat значение YES или true.

Swift

let positionLondon = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let londonMarker = GMSMarker(position: positionLondon)
londonMarker.isFlat = true
londonMarker.map = mapView

Objective-C

CLLocationCoordinate2D positionLondon = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *londonMarker = [GMSMarker markerWithPosition:positionLondon];
londonMarker.flat = YES;
londonMarker.map = mapView;

Вращение маркера

Маркер можно вращать вокруг точки привязки с помощью свойства rotation. Укажите угол поворота в градусах по часовой стрелке относительно исходного положения. Тип значения – CLLocationDegrees. Если маркер плоский, он по умолчанию ориентирован на север.

В приведенном ниже примере маркер поворачивается на 90°. Если установить для свойства groundAnchor значение 0.5,0.5, маркер будет вращаться вокруг своего центра, а не вокруг основания.

Swift

let degrees = 90.0
londonMarker.groundAnchor = CGPoint(x: 0.5, y: 0.5)
londonMarker.rotation = degrees
londonMarker.map = mapView

Objective-C

CLLocationDegrees degrees = 90;
londonMarker.groundAnchor = CGPointMake(0.5, 0.5);
londonMarker.rotation = degrees;
londonMarker.map = mapView;

Обработка событий маркеров

Вы можете прослушивать события, происходящие на карте, например когда пользователь нажимает на маркер. Чтобы отслеживать события, необходимо реализовать протокол GMSMapViewDelegate. Подробнее о том, как обрабатывать определенные события маркеров, читайте в разделе События маркеров и жесты. Список методов GMSMapViewDelegate также приведен в руководстве по событиям. События Просмотра улиц можно найти на странице GMSPanoramaViewDelegate.