標記自訂功能

選取平台： Android iOS JavaScript

不同自訂標記的螢幕截圖

進階標記使用兩個類別來定義標記：GMSAdvancedMarker 類別提供預設標記功能，GMSPinImageOptions 則包含進一步自訂的選項。本頁說明如何透過下列方式自訂標記：

  • 變更背景顏色
  • 變更邊框顏色
  • 變更字符顏色
  • 變更字符文字
  • 使用 iconView 屬性支援自訂檢視畫面和動畫
進階標記的組成
圖 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 的所有可動畫化屬性 (除了 frame 和 center) 的動畫。不支援在同一張地圖上顯示 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;