标记

请选择平台: Android iOS JavaScript

标记指示地图上的单个位置。

默认情况下,标记使用与 Google 地图通用外观和 如果您想自定义标记,可以更改标记的颜色, 或将标记图像替换为自定义图标,或将其他 标记的属性。

为响应标记上的点击事件,您可以打开信息 窗口。信息窗口在对话窗口中显示文本或图像 标记上方。您可以使用默认的信息窗口显示文本,也可以创建 您自己的自定义信息窗口,以完全控制其内容。

添加标记

要添加标记,请创建一个 GMSMarker 对象,其中包含一个 positiontitle,并设置其 map

以下示例展示了如何将标记添加到现有的 GMSMapView 对象。该标记在坐标为 10,10 处创建,显示 字符串“Hello world”。

Swift

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。或者,您也可以删除所有叠加层 (包括标记)调用 GMSMapView clear 方法。

Swift

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 对象。您可以修改标记 更改此对象。

Swift

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 的图标属性。

Swift

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

Objective-C

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

自定义标记图像

如果您想要更改默认的标记图像,可以使用 标记的 iconiconView 属性。如果设置了 iconView,则 API 忽略 icon 属性。

使用标记的 icon 属性

下面这段代码可创建一个带有自定义图标的标记,该图标作为 icon 属性中的 UIImage。图标以英国伦敦为中心。通过 代码段假定您的应用包含一张名为“house.png”的图片。

Swift

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”的图片。

Swift

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,因此您可以具有标准界面的层次结构 控件,每个视图都有一组标准的动画效果, 功能。您可以更改标记大小、颜色和 alpha 值。 还可以应用任意转换。iconView 属性 支持 UIView 的所有可设置动画的属性的动画,但 framecenter

在使用 iconView 时,请注意以下事项:

  • 设置 tracksViewChanges 后,UIView 可能对资源要求很高 YES,这可能会导致电池用量增加。相比之下, 单帧 UIImage 是静态的,不需要重新渲染。
  • 如果您在某些设备上放置多个标记,某些设备可能难以渲染地图 每个标记都有自己的UIView,并且所有标记都在跟踪 同时更改。
  • iconView 不会响应用户互动,因为它是 视图。
  • 无论 clipsToBounds 是否设为 YES,视图的行为都会如此 实际值。您可以应用作用于边界之外的转换,但是 必须在该对象的边界内绘制。全部 监控并应用转换/转换。简而言之,子视图必须是 视图中包含的对象

如需决定何时设置 tracksViewChanges 属性,您应设置 与重新绘制标记的优势相比, 。例如:

  • 如果您要进行一系列更改,可以将该属性更改为 YES,然后返回 NO
  • 当动画正在运行或正在加载内容时 应异步将该属性设置为 YES,直到操作发生之前 都没有问题

更改标记的不透明度

您可以通过标记的 opacity 属性控制其不透明度。您应该 将不透明度指定为 0.0 到 1.0 之间的浮点值,其中 0 表示完全透明 1 表示完全不透明。

Swift

marker.opacity = 0.6
      

Objective-C

marker.opacity = 0.6;
      

您可以使用 [Core Animation]Core [核心动画] 以动画方式呈现标记不透明度 使用 GMSMarkerLayer 实现动画效果

将标记平面化

标记图标通常根据设备屏幕的方向绘制, 因此旋转、倾斜或缩放地图不一定会 更改标记的朝向。

您可以将图标方向设置为平面的,与地球方向相对。平底鞋 标记会随地图的旋转而旋转,而当地图旋转时,标记也会改变视角 倾斜。与常规标记一样,当地图打开时,平面标记会保持大小不变, 放大或缩小。

要更改标记的朝向,请将标记的 flat 属性设置为 YEStrue

Swift

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 类型,测量单位为 从默认位置顺时针旋转角度。当地图上的标记为 Flat 标记时, 默认位置为北方

以下示例将标记旋转 90°。设置 groundAnchor 属性设置为 0.5,0.5,则会使标记围绕其中心旋转。 资源。

Swift

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 协议。请参阅标记事件和 以了解如何处理 特定标记事件。事件指南中还提供了 方法。有关街景事件,请参见 GMSPanoramaViewDelegate