إنشاء علامة متقدمة

اختيار النظام الأساسي: Android iOS JavaScript

لإضافة محددات متقدمة إلى الخريطة، قم بإنشاء مثيل جديد AdvancedMarkerOptions ثم استخدام GoogleMap.addMarker() لإضافة العلامة:

Kotlin

private val SYDNEY = LatLng(-33.87365, 151.20689)
val marker: Marker? = map.addMarker( AdvancedMarkerOptions() .position(SYDNEY) .iconView(textView) .zIndex(zIndex) )

Java

private final LatLng SYDNEY = new LatLng(-33.87365, 151.20689);
Marker marker = map.addMarker( new AdvancedMarkerOptions() .position(SYDNEY) .iconView(textView) .zIndex(zIndex));

يعرض GoogleMap.addMarker() مثيلًا من Marker. إذا لزم الأمر، يمكنك تحويل القيمة المعروضة إلى AdvancedMarker.

يمكنك استخدام AdvancedMarkerOptions لضبط العلامات المتقدمة. AdvancedMarkerOptions هي فئة فرعية من MarkerOptions لذلك تتيح جميع الإعدادات نفسها التي تتيحها MarkerOptions.

تتيح لك AdvancedMarkerOptions أيضًا إجراء ما يلي:

  • أنشئ مثيلًا من فئة PinConfig ، ثم استخدِم مثيل PinConfig لضبط مثيل AdvancedMarkerOptions.

    استخدِم PinConfig لتخصيص خصائص العلامة المتقدّمة، مثل لون الخلفية ولون الحدود والرمز.

  • إنشاء مثيل Android صف واحد (View) واستخدِم هذا المثيل لضبط المثيل AdvancedMarkerOptions.

    يتيح لك مثيل العرض تخصيص العلامة بالكامل.

استخدام PinConfig

تحتوي الفئة PinConfig على خيارات لتخصيصها. التالية. استخدِم PinConfig لإجراء ما يلي:

  • تغيير لون الخلفية
  • تغيير لون الحدود
  • تغيير لون الحرف الرسومي أو إضافة نص
  • إخفاء الرمز
مخطّط بياني يعرض أجزاء علامة متقدّمة
الشكل 1: أجزاء العلامة المتقدّمة

استخدام PinConfig.Builder لإنشاء مثيل من PinConfig:

Kotlin

// Use PinConfig.Builder to create an instance of PinConfig.
val pinConfigBuilder: PinConfig.Builder = PinConfig.builder()
pinConfigBuilder.setBackgroundColor(Color.MAGENTA)
val pinConfig: PinConfig = pinConfigBuilder.build()

// Use the PinConfig instance to set the icon for AdvancedMarkerOptions. val advancedMarkerOptions: AdvancedMarkerOptions = AdvancedMarkerOptions() .icon(BitmapDescriptorFactory.fromPinConfig(pinConfig)) .position(MARKER_POSITION)

// Pass the AdvancedMarkerOptions instance to addMarker(). val marker: Marker? = map.addMarker(advancedMarkerOptions)

Java

// Use PinConfig.Builder to create an instance of PinConfig.
PinConfig.Builder pinConfigBuilder = PinConfig.builder();
pinConfigBuilder.setBackgroundColor(Color.MAGENTA);
PinConfig pinConfig = pinConfigBuilder.build();
// Use the PinConfig instance to set the icon for AdvancedMarkerOptions. AdvancedMarkerOptions advancedMarkerOptions = new AdvancedMarkerOptions() .icon(BitmapDescriptorFactory.fromPinConfig(pinConfig)) .position(MARKER_POSITION);
// Pass the AdvancedMarkerOptions instance to addMarker(). Marker marker = map.addMarker(advancedMarkerOptions);

تغيير لون الخلفية

استخدم طريقة PinConfig.background() لتغيير لون خلفية العلامة:

Kotlin

// Use PinConfig.Builder to create an instance of PinConfig.
val pinConfigBuilder: PinConfig.Builder = PinConfig.builder()
pinConfigBuilder.setBackgroundColor(Color.MAGENTA)
val pinConfig: PinConfig = pinConfigBuilder.build()

Java

// Use PinConfig.Builder to create an instance of PinConfig.
PinConfig.Builder pinConfigBuilder = PinConfig.builder();
pinConfigBuilder.setBackgroundColor(Color.MAGENTA);
PinConfig pinConfig = pinConfigBuilder.build();

تغيير لون الحدود

استخدام طريقة PinConfig.borderColor() لتغيير لون الحدود العلامة:

Kotlin

// Set the border color.
val pinConfigBuilder: PinConfig.Builder = PinConfig.builder()
pinConfigBuilder.setBorderColor(Color.BLUE)
val pinConfig: PinConfig = pinConfigBuilder.build()

Java

// Set the border color.
PinConfig.Builder pinConfigBuilder = PinConfig.builder();
pinConfigBuilder.setBorderColor(Color.BLUE);
PinConfig pinConfig = pinConfigBuilder.build();

تغيير الحرف الرسومي

إنشاء Glyph المثيل ثم استخدام ذلك المثيل لإعداد PinConfig. استخدِم الرمز المميّز لضبط نص الرمز المميّز ولون النص أو لون الرمز المميّز أو لتحديد صورة مخصّصة لاستخدامها كرمز مميّز.

يحدِّد المثال التالي نص الرمز:

Kotlin

// Set the glyph text.
val pinConfigBuilder: PinConfig.Builder = PinConfig.builder()
val glyphText = Glyph("A")
// Alteratively, you can set the text color: // Glyph glyphText = new Glyph("A", Color.GREEN);
pinConfigBuilder.setGlyph(glyphText) val pinConfig: PinConfig = pinConfigBuilder.build()

Java

// Set the glyph text.
PinConfig.Builder pinConfigBuilder = PinConfig.builder();
PinConfig.Glyph glyphText = new PinConfig.Glyph("A");
// Alternatively, you can set the text color: // PinConfig.Glyph glyphText = new PinConfig.Glyph("A", Color.GREEN);
pinConfigBuilder.setGlyph(glyphText); PinConfig pinConfig = pinConfigBuilder.build();

ضبط لون الرسم البياني:

Kotlin

val glyphColor = PinConfig.Glyph(Color.BLUE)
pinConfigBuilder.setGlyph(glyphColor)
val pinConfig: PinConfig = pinConfigBuilder.build()

Java

PinConfig.Glyph glyphColor = new PinConfig.Glyph(Color.BLUE);
pinConfigBuilder.setGlyph(glyphColor);
PinConfig pinConfig = pinConfigBuilder.build();

اضبط صورة مخصّصة للرمز. هذا الأسلوب مفيد إذا كنت تريد استخدام شعار مخصص أو مؤشر مرئي آخر في العلامة.

Kotlin

// Set the glyph image.
val glyphImage: Int = R.drawable.example_image
val descriptor = PinConfig.BitmapDescriptorFactory.fromResource(glyphImage)
pinConfigBuilder.setGlyph(Glyph(descriptor))
val pinConfig: PinConfig = pinConfigBuilder.build()

Java

// Set the glyph image.
int glyphImage = R.drawable.example_image;
BitmapDescriptor descriptor = BitmapDescriptorFactory.fromResource(glyphImage);
pinConfigBuilder.setGlyph(new PinConfig.Glyph(descriptor));
PinConfig pinConfig = pinConfigBuilder.build();

إخفاء الرمز

يمكنك إخفاء الرمز المميّز لكي يملأ لون الخلفية العلامة بالكامل:

Kotlin

// Create a transparent glyph.
val pinConfigBuilder: PinConfig.Builder = PinConfig.builder()
pinConfigBuilder.setBackgroundColor(Color.MAGENTA)
pinConfigBuilder.setGlyph(PinConfig.Glyph(Color.TRANSPARENT))
val pinConfig: PinConfig = pinConfigBuilder.build()

Java

// Create a transparent glyph.
PinConfig.Builder pinConfigBuilder = PinConfig.builder();
pinConfigBuilder.setBackgroundColor(Color.MAGENTA);
pinConfigBuilder.setGlyph(new PinConfig.Glyph(Color.TRANSPARENT));
PinConfig pinConfig = pinConfigBuilder.build();

استخدام iconView

تتيح لك طريقة AdvancedMarkerOptions.iconView() استخدام أي رمز تعبيري View على جهاز Android كرموز مميزة. باستخدام طريقة العرض بصفتها العلامة، يمكنك التحكّم بشكل كامل في العلامة.

في تطبيقك، يمكنك أولاً إنشاء طريقة العرض، ثم استخدام AdvancedMarkerOptions.iconView() لإضافة طريقة العرض إلى التالية.

Kotlin

// Create a TextView to use as the marker.
val textView = TextView(this)
textView.text = "Hello!!"
textView.setBackgroundColor(Color.BLACK)
textView.setTextColor(Color.YELLOW)
val marker: Marker? = map.addMarker( AdvancedMarkerOptions() .position(SYDNEY) .iconView(textView) )

Java

// Create a TextView to use as the marker.
TextView textView = new TextView(this);
textView.setText("Hello!!");
textView.setBackgroundColor(Color.BLACK);
textView.setTextColor(Color.YELLOW);
Marker marker = map.addMarker( new AdvancedMarkerOptions() .position(SYDNEY) .iconView(textView));

الخطوات اللاحقة: