标记自定义

请选择平台： Android iOS JavaScript

其他自定义设置的屏幕截图 标记

高级标记使用两个类来定义标记： GMSAdvancedMarker 类提供默认标记 功能，而 GMSPinImageOptions 包含选项 以便进一步自定义此页面介绍了如何在 方式：

  • 更改背景颜色
  • 更改边框颜色
  • 更改字形颜色
  • 更改字形文本
  • 通过 iconView 属性支持自定义视图和动画
。 <ph type="x-smartling-placeholder">
</ph> 高级标记的组成部分
图 1：高级标记的各个部分。

更改背景颜色

使用 GMSPinImageOptions.backgroundColor 选项执行以下操作： 用于更改标记的背景颜色。

Swift

//...

let options = GMSPinImageOptions()
options.backgroundColor = .blue

let pinImage = GMSPinImage(options: options)
advancedMarker.icon = pinImage

advancedMarker.map = mapView

Objective-C

//...

GMSPinImageOptions *options = [[GMSPinImageOptions alloc] init];
options.backgroundColor = [UIColor blueColor];

GMSPinImage *pin = [GMSPinImage pinImageWithOptions:options];
customTextMarker.icon = pin;

customTextMarker.map = mapView;

更改边框颜色

使用 GMSPinImageOptions.borderColor 选项可更改 标记的背景颜色。

Swift

//...

let options = GMSPinImageOptions()
options.borderColor = .blue

let pinImage = GMSPinImage(options: options)
advancedMarker.icon = pinImage

advancedMarker.map = mapView

Objective-C

//...

GMSPinImageOptions *options = [[GMSPinImageOptions alloc] init];
options.backgroundColor = [UIColor blueColor];

GMSPinImage *pin = [GMSPinImage pinImageWithOptions:options];
advancedMarker.icon = pin;

advancedMarker.map = mapView;

更改字形颜色

使用 GMSPinImageGlyph.glyphColor 更改背景 标记的颜色。

Swift

//...

let options = GMSPinImageOptions()

let glyph = GMSPinImageGlyph(glyphColor: .yellow)
options.glyph = glyph

let glyphColor = GMSPinImage(options: options)

advancedMarker.icon = glyphColor
advancedMarker.map = mapView

Objective-C

//...

GMSPinImageOptions *options = [[GMSPinImageOptions alloc] init];

options.glyph = [[GMSPinImageGlyph alloc] initWithGlyphColor:[UIColor yellowColor]];
GMSPinImage *glyphColor = [GMSPinImage pinImageWithOptions:options];

advancedMarker.icon = glyphColor;
advancedMarker.map = mapView;

更改字形文本

使用 GMSPinImageGlyph 可更改标记的字形文本。

Swift

//...

let options = GMSPinImageOptions()

let glyph = GMSPinImageGlyph(text: "ABC", textColor: .white)
options.glyph = glyph

let pinImage = GMSPinImage(options: options)

advancedMarker.icon = pinImage
advancedMarker.map = mapView

Objective-C

//...

GMSPinImageOptions *options = [[GMSPinImageOptions alloc] init];

options.glyph = [[GMSPinImageGlyph alloc] initWithText:@"ABC" textColor:[UIColor whiteColor]];
GMSPinImage *pin = [GMSPinImage pinImageWithOptions:options];

customTextMarker.icon = pin;
customTextMarker.map = mapView;

通过 iconView 属性支持自定义视图和动画

与GMSMarker、GMSAdvancedMarker差不多 还支持带有 iconView。 iconView 属性支持具有所有可添加动画效果的属性的动画 UIView（边框和中心除外）。不支持带有 iconViews 的标记 和icons显示在同一个地图上。

Swift

//...

let advancedMarker = GMSAdvancedMarker(position: coordinate)
advancedMarker.iconView = customView()
advancedMarker.map = mapView

func customView() -> UIView {
// return your custom UIView.
}

Objective-C

//...

GMSAdvancedMarker *advancedMarker = [GMSAdvancedMarker markerWithPosition:kCoordinate];
advancedMarker.iconView = [self customView];
advancedMarker.map = self.mapView;

-   (UIView *)customView {
  // return custom view
}

布局约束条件

GMSAdvancedMarker 不直接支持布局 iconView 的约束条件。不过，您可以为用户设置布局限制 iconView 中的界面元素。创建视图后，对象 应将frame或size传递给标记。

Swift

//do not set advancedMarker.iconView.translatesAutoresizingMaskIntoConstraints = false

let advancedMarker = GMSAdvancedMarker(position: coordinate)
let customView = customView()

//set frame
customView.frame = CGRect(0, 0, width, height)

advancedMarker.iconView = customView

Objective-C

//do not set advancedMarker.iconView.translatesAutoresizingMaskIntoConstraints = NO;

GMSAdvancedMarker *advancedMarker = [GMSAdvancedMarker markerWithPosition:kCoordinate];

CustomView *customView = [self customView];

//set frame
customView.frame = CGRectMake(0, 0, width, height);

advancedMarker.iconView = customView;