تخصيص محدّد الموقع الأساسي

bookmark_border تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

تستخدِم العلامات الثلاثية الأبعاد فئتين لتحديد العلامات: تقدِّم فئة 3DMarkerElement المَعلمات الأساسية (position وlabel وmap)، وتحتوي فئة PinElement على خيارات لمزيد من التخصيص.

لإضافة علامات إلى خريطة، يجب أولاً تحميل مكتبة العلامات التي توفّر فئتَي 3DMarkerElement وPinElement.

يعرض المقتطف التالي رمزًا لإنشاء PinElement جديد، ثم تطبيقه على علامة:

const pinScaled = new PinElement({
  scale: 1.5,
});

const markerWithLabel = new Marker3DElement({
  position: { lat: 37.419, lng: -122.03 },
  label: 'Simple label'
});

في الخرائط التي تم إنشاؤها باستخدام HTML، يتمّ تحديد المَعلمات الأساسية للعلامة باستخدام عنصر HTML‏ gmp-marker-3d، ويجب تطبيق أيّ تخصيص يستخدِم فئةPinElement برمجيًا. لإجراء ذلك، يجب أن يسترجع الرمز عناصر gmp-marker-3d من صفحة HTML. يعرض المقتطف التالي رمزًا لمحاولة البحث عن مجموعة من عناصر gmp-marker-3d، ثم التنقّل في النتائج لتطبيق التخصيص الذي تم الإعلان عنه في gmp-marker-3d.

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

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

  markers[i].appendChild(pin.element);
}

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

• تكبير/تصغير العلامة
• تغيير لون الخلفية
• تغيير لون الحدود
• تغيير لون الرمز المميّز
• إضافة نص إلى رمز رسومي
• تغيير الارتفاع
• إزالة العلامات

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

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

// Adjust the scale.
const pinScaled = new PinElement({
  scale: 1.5,
});
const markerScaled = new Marker3DElement({
  map,
  position: { lat: 37.419, lng: -122.02 },
});

markerScaled.appendChild(pinScaled);

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

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

// Change the background color.
const pinBackground = new PinElement({
  background: '#FBBC04',
});
const markerBackground = new Marker3DElement({
  map,
  position: { lat: 37.419, lng: -122.01 },
});

markerBackground.appendChild(pinBackground);

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

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

// Change the border color.
const pinBorder = new PinElement({
  borderColor: "#137333",
});
const markerBorder = new Marker3DElement({
  map,
  position: { lat: 37.415, lng: -122.035 },
});

markerBorder.appendChild(pinBorder);

تغيير لون الرمز

استخدِم الخيار PinElement.glyphColor لتغيير لون الرمز المميّز لعلامة:

// Change the glyph color.
const pinGlyph = new PinElement({
  glyphColor: "white",
});
const markerGlyph = new Marker3DElement({
  map,
  position: { lat: 37.415, lng: -122.025 },
});

markerGlyph.appendChild(pinGlyph);

إضافة نص إلى رمز

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

const pinTextGlyph = new PinElement({
  glyph: "T",
  glyphColor: "white",
});
const markerGlyphText = new Marker3DElement({
  map,
  position: { lat: 37.415, lng: -122.015 },
});

markerGlyphText.appendChild(pinTextGlyph);

تغيير الارتفاع

استخدِم الخيار Marker3DElement.position.altitude مع Marker3DElement.altitudeMode وMarker3DElement.extruded لتغيير ارتفاع العلامة وإضافة خط مسطّح بين الأرض والعلامة:

const marker = new Marker3DElement({
  position: { lat: 37.4239163, lng: -122.0947209, altitude: 100 },
  altitudeMode: 'RELATIVE_TO_GROUND',
  extruded: true,
});

إزالة العلامات

استخدِم الرمز Marker3DElement.remove() لإزالة العلامات من الخريطة:

const marker = document.querySelector('gmp-marker-3d');
marker.remove();

الخطوات التالية

• إنشاء علامات باستخدام الرسومات