Маркеры

Выберите платформу: 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 не распознаются, пока установлен iconView .

Использование свойства `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 .