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

تستخدم العلامات المتقدمة فئتين لتحديد العلامات: توفر الفئة AdvancedMarkerElement المعلمات الأساسية (position، title وmap)، وتحتوي الفئة PinElement على خيارات للمزيد من الخيارات التخصيص. يعرض المقتطف التالي الرمز لإنشاء PinElement جديدة، ثم نطبقه على علامة.

// Create a pin element.
const pin = new PinElement({
    scale: 1.5,
});
// Create a marker and apply the element.
const marker = new AdvancedMarkerElement({
    map,
    position: { lat: 37.419, lng: -122.02 },
    content: pin.element,
});

في الخرائط التي تم إنشاؤها باستخدام HTML، يتم الإعلان عن المعلمات الأساسية للعلامة باستخدام عنصر HTML gmp-advanced-marker أي تخصيص يستخدم يجب تطبيق الصف PinElement آليًا. للقيام بذلك، يجب أن لاسترداد عناصر gmp-advanced-marker من صفحة HTML. ما يلي: يعرض المقتطف رمزًا لطلب بحث لمجموعة من عناصر gmp-advanced-marker، ثم تكرار النتائج لتطبيق التخصيص الذي تم تضمينه في PinElement

// Return an array of markers.
const advancedMarkers = [...document.querySelectorAll('gmp-advanced-marker')];

// Loop through the markers
for (let i = 0; i < advancedMarkers.length; i++) {
  const pin = new PinElement({
      scale: 2.0,
  });

  marker.appendChild(pin.element);
}

توضح لك هذه الصفحة كيفية تخصيص العلامات بالطرق التالية:

• إضافة نص العنوان
• تحجيم العلامة
• تغيير لون الخلفية
• تغيير لون الحدود
• تغيير لون الرسم البياني
• إخفاء الحرف الرسومي

إضافة نص العنوان

يظهر نص العنوان عند تمرير المؤشر فوق علامة. نص العنوان قابل للقراءة باستخدام برامج قراءة الشاشة.

لإضافة نص العنوان آليًا، يمكنك استخدام AdvancedMarkerElement.title. الخيار:

// 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

لإضافة نص عنوان إلى علامة تم إنشاؤها باستخدام HTML، استخدِم السمة title:

<gmp-map
  center="43.4142989,-124.2301242"
  zoom="4"
  map-id="DEMO_MAP_ID"
  style="height: 400px"
>
  <gmp-advanced-marker
    position="37.4220656,-122.0840897"
    title="Mountain View, CA"
  ></gmp-advanced-marker>
  <gmp-advanced-marker
    position="47.648994,-122.3503845"
    title="Seattle, WA"
  ></gmp-advanced-marker>
</gmp-map>
index.html

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

لتغيير حجم العلامة، استخدِم الخيار scale.

// 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

// 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 لتغيير لون خلفية محدّد الموقع:

// 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

// 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 لتغيير لون الحدود العلامة:

// 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

// 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 لتغيير لون الرسم البياني للعلامة:

// 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

// 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 على سلسلة فارغة لإخفاء الحرف الرسومي للعلامة:

// 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

// 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. هذا له تأثير إخفاء الحرف الرسومي بصريًا.

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

• إنشاء علامات تحتوي على رسومات