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

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

لإضافة علامات إلى خريطة، يجب أولاً تحميل مكتبة العلامات التي توفّر الفئتَين Marker3DElement و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();

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

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