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

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