تخصيص العلامات

اختيار النظام الأساسي: نظام التشغيل 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;