Маркеры

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

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

Быстрый

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

Objective-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
      

Objective-C

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

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

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

Быстрый

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

Objective-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
      

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".

Быстрый

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
    })
  }
}
      

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];
  _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 , независимо от его фактического значения. Вы можете применять преобразования, которые работают за пределами границ, но объект, который вы рисуете, должен находиться в пределах границ объекта. Все преобразования/сдвиги отслеживаются и применяются. Короче говоря: подвиды должны содержаться внутри вида.
  • Чтобы использовать -copyWithZone: в GMSMarker , необходимо сначала скопировать GMSMarker , а затем установить новый экземпляр iconView в копии. UIView не поддерживает NSCopying , поэтому он не может скопировать iconView .

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

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

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

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

Быстрый

marker.opacity = 0.6
      

Objective-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
      

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

Быстрый

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. Для событий Street View см. GMSPanoramaViewDelegate .