سفارشی‌سازی نشانگر

پلاتفرم را انتخاب کنید: Android iOS JavaScript

نماگرفتی از نشانگرهای سفارشی مختلف

نشانگرهای پیشرفته از دو کلاس برای تعریف نشانگرها استفاده می‌کند: کلاس GMSAdvancedMarker قابلیت‌های نشانگر پیش‌فرض را ارائه می‌دهد، و GMSPinImageOptions شامل گزینه‌هایی برای سفارشی‌سازی بیشتر است. این صفحه به شما نشان می‌دهد که چگونه نشانگرها را به روش‌های زیر سفارشی‌سازی کنید:

  • تغییر رنگ پس‌زمینه
  • تغییر رنگ حاشیه
  • تغییر رنگ گلیف
  • تغییر دادن نوشتار گلیف
  • پشتیبانی از نماهای سفارشی و پویانمایی با ویژگی iconView
بخش‌های نشانگر پیشرفته
شکل ۱: بخش‌های نشانگر پیشرفته.

تغییر رنگ پس‌زمینه

از گزینه GMSPinImageOptions.backgroundColor برای تغییر رنگ پس‌زمینه نشانگر استفاده کنید.

Swift

//...

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

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

advancedMarker.map = mapView

آبجکتیو-سی

//...

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

آبجکتیو-سی

//...

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 pinImage = GMSPinImage(options: options)

advancedMarker.icon = pinImage
advancedMarker.map = mapView

آبجکتیو-سی

//...

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

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

advancedMarker.icon = pinImage;
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

آبجکتیو-سی

//...

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.
}

آبجکتیو-سی

//...

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

آبجکتیو-سی

//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;