標記自訂功能

選取平台： 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 除外。不支援具有 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;