Эта страница переведена с помощью Cloud Translation API.

Маркеры

Выберите платформу: 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: и передав полученное изображение свойству icon объекта 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 обратите внимание на следующие моменты:

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

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

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

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

Вы можете управлять прозрачностью маркера с помощью свойства opacity . Значение 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 .

Маркеры Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

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

Быстрый

Objective-C

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

Быстрый

Objective-C

Быстрый

Objective-C

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

Быстрый

Objective-C

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

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

Быстрый

Objective-C

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

Быстрый

Objective-C

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

Быстрый

Objective-C

Сглаживание маркера

Быстрый

Objective-C

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

Быстрый

Objective-C

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

Маркеры

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

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