Tuỳ chỉnh điểm đánh dấu

Chọn nền tảng: Android iOS JavaScript

Ảnh chụp màn hình về các lựa chọn tuỳ chỉnh bút dạ

Điểm đánh dấu nâng cao sử dụng hai lớp để xác định điểm đánh dấu: Lớp GMSAdvancedMarker cung cấp điểm đánh dấu mặc định và GMSPinImageOptions có chứa các tuỳ chọn để tuỳ chỉnh thêm. Trang này cho bạn biết cách tuỳ chỉnh điểm đánh dấu trong các cách sau:

  • Thay đổi màu nền
  • Thay đổi màu đường viền
  • Thay đổi màu ký tự
  • Thay đổi văn bản ký tự
  • Hỗ trợ thành phần hiển thị và ảnh động tuỳ chỉnh với thuộc tính iconView
Các phần của điểm đánh dấu nâng cao
Hình 1: Các thành phần của điểm đánh dấu nâng cao.

Thay đổi màu nền

Sử dụng lựa chọn GMSPinImageOptions.backgroundColor để thay đổi màu nền của điểm đánh dấu.

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;

Thay đổi màu đường viền

Dùng lựa chọn GMSPinImageOptions.borderColor để thay đổi màu nền của điểm đánh dấu.

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;

Thay đổi màu ký tự

Sử dụng GMSPinImageGlyph.glyphColor để thay đổi nền màu của một điểm đánh dấu.

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;

Thay đổi văn bản ký tự

Sử dụng GMSPinImageGlyph để thay đổi văn bản ký tự của một điểm đánh dấu.

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;

Hỗ trợ ảnh động và khung hiển thị tuỳ chỉnh với thuộc tính iconView

Tương tự như GMSMarker, GMSAdvancedMarker cũng hỗ trợ điểm đánh dấu bằng iconView. Thuộc tính iconView hỗ trợ ảnh động của tất cả thuộc tính có thể tạo ảnh của UIView ngoại trừ khung hình và chính giữa. Không hỗ trợ điểm đánh dấu có iconViews và icons được hiển thị trên cùng một bản đồ.

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
}

Hạn chế về bố cục

GMSAdvancedMarker không trực tiếp hỗ trợ bố cục các điều kiện ràng buộc cho iconView của thuộc tính đó. Tuy nhiên, bạn có thể đặt điều kiện ràng buộc về bố cục đối với người dùng các phần tử giao diện trong iconView. Sau khi tạo khung hiển thị, đối tượng frame hoặc size phải được chuyển đến điểm đánh dấu.

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;