Маркеры обозначают отдельные места на карте.
По умолчанию маркеры используют стандартные значки, которые имеют общий внешний вид и функции 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
.