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

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

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

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

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

في الخرائط التي تم إنشاؤها باستخدام 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 markerWithScale = new Marker3DElement({
    position: { lat: 37.419, lng: -122.02 },
});
markerWithScale.append(pinScaled);
index.js

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

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

// Change the background color.
const pinBackground = new PinElement({
    background: '#FBBC04',
});

const markerWithBackground = new Marker3DElement({
    position: { lat: 37.419, lng: -122.01 },
});
markerWithBackground.append(pinBackground);
index.js

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

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

// Change the border color.
const pinBorder = new PinElement({
    borderColor: '#FFFFFF',
});
const markerWithBorder = new Marker3DElement({
    position: { lat: 37.415, lng: -122.035 },
});
markerWithBorder.append(pinBorder);
index.js

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

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

// Change the glyph color.
const pinGlyph = new PinElement({
    glyphColor: 'white',
});
const markerWithGlyphColor = new Marker3DElement({
    position: { lat: 37.415, lng: -122.025 },
});
markerWithGlyphColor.append(pinGlyph);
index.js

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

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

// Change many elements together and extrude marker.
const pinTextGlyph = new PinElement({
    background: '#F0F6FC',
    glyphText: 'E',
    glyphColor: 'red',
    borderColor: '#0000FF',
});
const markerWithGlyphText = new Marker3DElement({
    position: { lat: 37.415, lng: -122.015, altitude: 50 },
    extruded: true,
    altitudeMode: 'RELATIVE_TO_GROUND',
});
markerWithGlyphText.append(pinTextGlyph);
index.js

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

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

// Change a marker's altitude and add an extrusion.
const extrudedMarker = new Marker3DElement({
    position: { lat: 37.4239163, lng: -122.0947209, altitude: 100 },
    altitudeMode: 'RELATIVE_TO_GROUND',
    extruded: true,
});
index.js

إزالة مواد الطباعة

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

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

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

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