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

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

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

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

  • رنگ پس زمینه را تغییر دهید
  • رنگ حاشیه را تغییر دهید
  • رنگ گلیف را تغییر دهید
  • متن گلیف را تغییر دهید
  • با ویژگی iconView از نماها و انیمیشن های سفارشی پشتیبانی کنید
قطعات یک نشانگر پیشرفته
شکل 1 : قطعات یک نشانگر پیشرفته.

رنگ پس زمینه را تغییر دهید

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

سویفت 

//...

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

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

advancedMarker.map = mapView

هدف-C 

//...

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

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

customTextMarker.map = mapView;

رنگ حاشیه را تغییر دهید

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

سویفت 

//...

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

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

advancedMarker.map = mapView

هدف-C 

//...

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

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

advancedMarker.map = mapView;

رنگ گلیف را تغییر دهید

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

سویفت 

//...

let options = GMSPinImageOptions()

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

let glyphColor = GMSPinImage(options: options)

advancedMarker.icon = glyphColor
advancedMarker.map = mapView

هدف-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 برای تغییر متن علامت نشانگر استفاده کنید.

سویفت 

//...

let options = GMSPinImageOptions()

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

let pinImage = GMSPinImage(options: options)

advancedMarker.icon = pinImage
advancedMarker.map = mapView

هدف-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 نمایش داده شده در همان نقشه پشتیبانی نمی کند.

سویفت 

//...

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

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

هدف-C 

//...

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

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

محدودیت های چیدمان

GMSAdvancedMarker مستقیماً از محدودیت‌های طرح‌بندی برای iconView خود پشتیبانی نمی‌کند. با این حال، می‌توانید محدودیت‌های طرح‌بندی را برای عناصر رابط کاربری در iconView تنظیم کنید. پس از ایجاد نمای خود، frame یا size شی باید به نشانگر منتقل شود.

سویفت 

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

هدف-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;
،
پلتفرم را انتخاب کنید: Android iOS JavaScript

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

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

  • رنگ پس زمینه را تغییر دهید
  • رنگ حاشیه را تغییر دهید
  • رنگ گلیف را تغییر دهید
  • متن گلیف را تغییر دهید
  • با ویژگی iconView از نماها و انیمیشن های سفارشی پشتیبانی کنید
قطعات یک نشانگر پیشرفته
شکل 1 : قطعات یک نشانگر پیشرفته.

رنگ پس زمینه را تغییر دهید

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

سویفت 

//...

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

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

advancedMarker.map = mapView

هدف-C 

//...

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

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

customTextMarker.map = mapView;

رنگ حاشیه را تغییر دهید

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

سویفت 

//...

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

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

advancedMarker.map = mapView

هدف-C 

//...

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

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

advancedMarker.map = mapView;

رنگ گلیف را تغییر دهید

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

سویفت 

//...

let options = GMSPinImageOptions()

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

let glyphColor = GMSPinImage(options: options)

advancedMarker.icon = glyphColor
advancedMarker.map = mapView

هدف-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 برای تغییر متن علامت نشانگر استفاده کنید.

سویفت 

//...

let options = GMSPinImageOptions()

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

let pinImage = GMSPinImage(options: options)

advancedMarker.icon = pinImage
advancedMarker.map = mapView

هدف-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 نمایش داده شده در همان نقشه پشتیبانی نمی کند.

سویفت 

//...

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

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

هدف-C 

//...

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

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

محدودیت های چیدمان

GMSAdvancedMarker مستقیماً از محدودیت‌های طرح‌بندی برای iconView خود پشتیبانی نمی‌کند. با این حال، می‌توانید محدودیت‌های طرح‌بندی را برای عناصر رابط کاربری در iconView تنظیم کنید. پس از ایجاد نمای خود، frame یا size شی باید به نشانگر منتقل شود.

سویفت 

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

هدف-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;