התאמה אישית של הסמנים

בחירת פלטפורמה: 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;