توضح لك هذه الصفحة كيفية التحكم في الجوانب التالية من العلامات المتقدمة:
- تعيين سلوك التصادم لعلامة
- ضبط ارتفاع العلامة
- التحكم في رؤية العلامة حسب مستوى تكبير/تصغير الخريطة
تعيين سلوك التصادم لعلامة
يتحكم سلوك التصادم في كيفية عرض العلامة في حالة تصادمها (تداخلها) مع علامة أخرى. لا يتم دعم سلوك التصادم إلا في خرائط المتجهات.
لضبط سلوك التصادم، اضبط AdvancedMarkerElement.collisionBehavior
على أي مما يلي:
REQUIRED
: (تلقائي) عرض العلامة دائمًا بغض النظر عن التصادم.OPTIONAL_AND_HIDES_LOWER_PRIORITY
يجب عرض محدد الموقع فقط إذا لم يتداخل مع علامات أخرى. إذا تداخلت علامتان من هذا النوع، سيتم عرض العلامة التي تتضمن علامةzIndex
الأعلى. إذا كان لديهمzIndex
نفسه، سيتم عرض التصنيف الذي يحتوي على موضع الشاشة العمودية السفلي.REQUIRED_AND_HIDES_OPTIONAL
عرض محدد الموقع دائمًا بغض النظر عن التصادم وإخفاء أي علامات أو تصنيفاتOPTIONAL_AND_HIDES_LOWER_PRIORITY
تتداخل مع العلامة.
يوضح المثال التالي إعداد سلوك التصادم لإحدى العلامات:
TypeScript
const advancedMarker = new AdvancedMarkerElement({ position: new google.maps.LatLng({ lat, lng }), map, collisionBehavior: collisionBehavior, });
JavaScript
const advancedMarker = new AdvancedMarkerElement({ position: new google.maps.LatLng({ lat, lng }), map, collisionBehavior: collisionBehavior, });
ضبط ارتفاع العلامة
في خرائط المتجه، يمكنك تعيين الارتفاع الذي تظهر عنده علامة. وهذا مفيد لجعل العلامات تظهر بشكل صحيح فيما يتعلق بمحتوى الخريطة ثلاثية الأبعاد. لضبط ارتفاع علامة معيّنة، يجب تحديد LatLngAltitude
كقيمة للخيار MarkerView.position
:
TypeScript
const pin = new PinElement({ background: '#4b2e83', borderColor: '#b7a57a', glyphColor: '#b7a57a', scale: 2.0, }); const markerView = new AdvancedMarkerElement({ map, content: pin.element, // Set altitude to 20 meters above the ground. position: { lat: 47.65170843460547, lng: -122.30754, altitude: 20 } as google.maps.LatLngAltitudeLiteral, });
JavaScript
const pin = new PinElement({ background: "#4b2e83", borderColor: "#b7a57a", glyphColor: "#b7a57a", scale: 2.0, }); const markerView = new AdvancedMarkerElement({ map, content: pin.element, // Set altitude to 20 meters above the ground. position: { lat: 47.65170843460547, lng: -122.30754, altitude: 20 }, });
التحكم في رؤية العلامة حسب مستوى تكبير/تصغير الخريطة
شاهد تغير رؤية العلامات (ابدأ بالتصغير):
للتحكم في مستوى رؤية "علامة متقدمة"، أنشئ مستمعًا باللغة zoom_changed
،
ثم أضِف دالة شرطية لضبط AdvancedMarkerElement.map
على
null
إذا تجاوز التكبير أو التصغير المستوى المحدد، كما هو موضّح في المثال التالي:
TypeScript
map.addListener('zoom_changed', () => { const zoom = map.getZoom(); if (zoom) { // Only show each marker above a certain zoom level. marker01.map = zoom > 14 ? map : null; marker02.map = zoom > 15 ? map : null; marker03.map = zoom > 16 ? map : null; marker04.map = zoom > 17 ? map : null; } });
JavaScript
map.addListener("zoom_changed", () => { const zoom = map.getZoom(); if (zoom) { // Only show each marker above a certain zoom level. marker01.map = zoom > 14 ? map : null; marker02.map = zoom > 15 ? map : null; marker03.map = zoom > 16 ? map : null; marker04.map = zoom > 17 ? map : null; } });