وتستخدم العلامات المتقدّمة فئتَين لتحديد العلامات: توفّر الفئة 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://developers.google.cn/static/maps/documentation/javascript/advanced-markers/images/marker_parts.png?authuser=4&hl=ar)
إضافة نص العنوان
يظهر نص العنوان عند تمرير المؤشر فوق علامة. يمكن لقارئات الشاشة قراءة نص العنوان.
لإضافة نص العنوان آليًا، يمكنك استخدام
الخيار AdvancedMarkerElement.title
:
TypeScript
// 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',
});
JavaScript
// 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.03 },
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.03 },
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.02 },
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.02 },
content: pinGlyph.element,
});
إخفاء الحرف الرسومي
اضبط الخيار PinElement.glyph
على سلسلة فارغة لإخفاء الحرف الرسومي للعلامة:
TypeScript
// Hide the glyph.
const pinNoGlyph = new PinElement({
glyph: '',
});
const markerViewNoGlyph = new AdvancedMarkerElement({
map,
position: { lat: 37.415, lng: -122.01 },
content: pinNoGlyph.element,
});
JavaScript
// Hide the glyph.
const pinNoGlyph = new PinElement({
glyph: "",
});
const markerViewNoGlyph = new AdvancedMarkerElement({
map,
position: { lat: 37.415, lng: -122.01 },
content: pinNoGlyph.element,
});
يمكنك بدلاً من ذلك ضبط PinElement.glyphColor
على القيمة نفسها كـ PinElement.background
.
هذا له تأثير إخفاء الحرف الرسومي بصريًا.
الخطوات اللاحقة:
إنّ محتوى هذه الصفحة مرخّص بموجب ترخيص Creative Commons Attribution 4.0 ما لم يُنصّ على خلاف ذلك، ونماذج الرموز مرخّصة بموجب ترخيص Apache 2.0. للاطّلاع على التفاصيل، يُرجى مراجعة سياسات موقع Google Developers. إنّ Java هي علامة تجارية مسجَّلة لشركة Oracle و/أو شركائها التابعين.
تاريخ التعديل الأخير: 2024-07-03 (حسب التوقيت العالمي المتفَّق عليه)
[]
[]