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

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

تستخدِم العلامات المتقدّمة فئتَين لتحديد العلامات: تقدّم فئة 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);
}

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

أجزاء العلامة المتقدّمة
الشكل 1: أجزاء العلامة المتقدّمة

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

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

لإضافة نص العنوان آليًا، استخدِم الخيار 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.

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.035 },
    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.035 },
  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.025 },
    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.025 },
  content: pinGlyph.element,
});
index.js

إضافة نص إلى حرف رسومي

يمكنك استخدام الخيار PinElement.glyph لاستبدال الحرف الرسومي التلقائي بنص. الحرف. يتم تغيير حجم الرمز النصي لرمز PinElement مع PinElement، وينسجم لونه التلقائي مع glyphColor التلقائي لرمز PinElement.

TypeScript

const pinTextGlyph = new PinElement({
    glyph: 'T',
    glyphColor: 'white',
});
const markerViewGlyphText = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.015 },
    content: pinTextGlyph.element,
});
index.ts

JavaScript

const pinTextGlyph = new PinElement({
  glyph: "T",
  glyphColor: "white",
});
const markerViewGlyphText = new AdvancedMarkerElement({
  map,
  position: { lat: 37.415, lng: -122.015 },
  content: pinTextGlyph.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.005 },
    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.005 },
  content: pinNoGlyph.element,
});
index.js

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

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