تستخدم العلامات المتقدمة فئتين لتحديد العلامات:
توفر الفئة 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);
}
توضح لك هذه الصفحة كيفية تخصيص العلامات بالطرق التالية:
- إضافة نص العنوان
- تحجيم العلامة
- تغيير لون الخلفية
- تغيير لون الحدود
- تغيير لون الرسم البياني
- استخدام نص حرفي
- إخفاء الحرف الرسومي
![أجزاء العلامة المتقدمة.](https://google-developers.gonglchuangl.net/static/maps/documentation/javascript/advanced-markers/images/marker_parts.png?authuser=1&hl=ar)
إضافة نص العنوان
يظهر نص العنوان عند تمرير المؤشر فوق علامة. نص العنوان قابل للقراءة باستخدام برامج قراءة الشاشة.
لإضافة نص العنوان آليًا، يمكنك استخدام 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", });
لإضافة نص عنوان إلى علامة تم إنشاؤها باستخدام 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>
تغيير حجم العلامة
لتغيير حجم العلامة، استخدِم الخيار 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, });
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, });
تغيير لون الخلفية
يمكنك استخدام الخيار 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, });
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, });
تغيير لون الحدود
استخدِم الخيار 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, });
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, });
تغيير لون الرسم البياني
استخدِم الخيار 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, });
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, });
إضافة نص إلى حرف رسومي
يمكنك استخدام الخيار 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, });
JavaScript
const pinTextGlyph = new PinElement({ glyph: "T", glyphColor: "white", }); const markerViewGlyphText = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.015 }, content: pinTextGlyph.element, });
إخفاء الحرف الرسومي
اضبط الخيار 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, });
JavaScript
// Hide the glyph. const pinNoGlyph = new PinElement({ glyph: "", }); const markerViewNoGlyph = new AdvancedMarkerElement({ map, position: { lat: 37.415, lng: -122.005 }, content: pinNoGlyph.element, });
يمكنك بدلاً من ذلك ضبط PinElement.glyphColor
على القيمة نفسها كـ PinElement.background
.
هذا له تأثير إخفاء الحرف الرسومي بصريًا.