Маркеры

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

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

По умолчанию маркеры используют стандартный значок, который имеет общий внешний вид Google Maps. Если вы хотите настроить свой маркер, вы можете изменить цвет маркера по умолчанию, заменить изображение маркера пользовательским значком или изменить другие свойства маркера.

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

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

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

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

Быстрый 

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

Цель-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 . Альтернативно вы можете удалить все наложения (включая маркеры), находящиеся в данный момент на карте, вызвав метод clear GMSMapView .

Быстрый 

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

Цель-C 

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.8683
                                                        longitude:151.2086
                                                             zoom:6];
mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
// ...
[mapView clear];

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

Быстрый 

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

Цель-C 

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

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

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

Быстрый 

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

Цель-C 

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

Настройка изображения маркера

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

Использование свойства icon маркера

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

Быстрый 

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

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

Быстрый 

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 mapView = GMSMapView.map(withFrame: .zero, camera: camera)
    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
    })
  }
}

Цель-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];
  _mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
  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 обратите внимание на следующие соображения:

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

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

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

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

Вы можете контролировать непрозрачность маркера с помощью его свойства opacity . Вам следует указать непрозрачность в виде числа с плавающей точкой от 0,0 до 1,0, где 0 — полностью прозрачный, а 1 — полностью непрозрачный.

Быстрый 

marker.opacity = 0.6

Цель-C 

marker.opacity = 0.6;

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

Сведение маркера

Значки маркеров обычно рисуются ориентированными на экран устройства, а не на поверхность карты, поэтому вращение, наклон или масштабирование карты не обязательно меняют ориентацию маркера.

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

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

Быстрый 

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

Цель-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 приводит к вращению маркера вокруг его центра, а не вокруг основания.

Быстрый 

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

Цель-C 

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

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

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