تخصيص العلامة الأساسية

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

تستخدم العلامات المتقدّمة فئتَين لتحديد العلامات: توفّر الفئة AdvancedMarkerElement وظيفة العلامات التلقائية، وPinElement تحتوي على خيارات للتخصيص الإضافي. توضح لك هذه الصفحة كيفية تخصيص العلامات بالطرق التالية:

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

أضف نص العنوان

يظهر نص العنوان عند تمرير المؤشر فوق محدّد موقع. يمكن قراءة نص العنوان بواسطة برامج قراءة الشاشة. استخدم خيار AdvancedMarkerElement.title لإضافة نص عنوان إلى علامة:

TypeScript

// Default marker with title text (no PinElement).
const markerViewWithText = new AdvancedMarkerElement({
    map,
    position: { lat: 37.419, lng: -122.03 },
    title: 'Title text for the marker at lat: 37.419, lng: -122.03',
});
index.ts

JavaScript

// Default marker with title text (no PinElement).
const markerViewWithText = new AdvancedMarkerElement({
  map,
  position: { lat: 37.419, lng: -122.03 },
  title: "Title text for the marker at lat: 37.419, lng: -122.03",
});
index.js

تغيير حجم العلامة

استخدم الخيار PinElement.scale لضبط مقياس العلامة:

TypeScript

// Adjust the scale.
const pinScaled = new PinElement({
    scale: 1.5,
});
const markerViewScaled = new AdvancedMarkerElement({
    map,
    position: { lat: 37.419, lng: -122.02 },
    content: pinScaled.element,
});
index.ts

JavaScript

// Adjust the scale.
const pinScaled = new PinElement({
  scale: 1.5,
});
const markerViewScaled = new AdvancedMarkerElement({
  map,
  position: { lat: 37.419, lng: -122.02 },
  content: pinScaled.element,
});
index.js

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

يمكنك استخدام الخيار PinElement.background لتغيير لون خلفية محدّد الموقع:

TypeScript

// Change the background color.
const pinBackground = new PinElement({
    background: '#FBBC04',
});
const markerViewBackground = new AdvancedMarkerElement({
    map,
    position: { lat: 37.419, lng: -122.01 },
    content: pinBackground.element,
});
index.ts

JavaScript

// Change the background color.
const pinBackground = new PinElement({
  background: "#FBBC04",
});
const markerViewBackground = new AdvancedMarkerElement({
  map,
  position: { lat: 37.419, lng: -122.01 },
  content: pinBackground.element,
});
index.js

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

يمكنك استخدام الخيار PinElement.borderColor لتغيير لون حدود العلامة:

TypeScript

// Change the border color.
const pinBorder = new PinElement({
    borderColor: '#137333',
});
const markerViewBorder = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.03 },
    content: pinBorder.element,
});
index.ts

JavaScript

// Change the border color.
const pinBorder = new PinElement({
  borderColor: "#137333",
});
const markerViewBorder = new AdvancedMarkerElement({
  map,
  position: { lat: 37.415, lng: -122.03 },
  content: pinBorder.element,
});
index.js

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

يمكنك استخدام الخيار PinElement.glyphColor لتغيير لون الحرف الرسومي لعلامة ما:

TypeScript

// Change the glyph color.
const pinGlyph = new PinElement({
    glyphColor: 'white',
});
const markerViewGlyph = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.02 },
    content: pinGlyph.element,
});
index.ts

JavaScript

// Change the glyph color.
const pinGlyph = new PinElement({
  glyphColor: "white",
});
const markerViewGlyph = new AdvancedMarkerElement({
  map,
  position: { lat: 37.415, lng: -122.02 },
  content: pinGlyph.element,
});
index.js

إخفاء الحرف الرسومي

اضبط خيار PinElement.glyph على سلسلة فارغة لإخفاء الحرف الرسومي للعلامة:

TypeScript

// Hide the glyph.
const pinNoGlyph = new PinElement({
    glyph: '',
});
const markerViewNoGlyph = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.01 },
    content: pinNoGlyph.element,
});
index.ts

JavaScript

// Hide the glyph.
const pinNoGlyph = new PinElement({
  glyph: "",
});
const markerViewNoGlyph = new AdvancedMarkerElement({
  map,
  position: { lat: 37.415, lng: -122.01 },
  content: pinNoGlyph.element,
});
index.js

ويمكنك بدلاً من ذلك ضبط PinElement.glyphColor على القيمة نفسها المُستخدَمة في PinElement.background. هذا له تأثير إخفاء الحرف الرسومي بصريًا.

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