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

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