التحكّم في سلوك الاصطدام والارتفاع ومستوى الرؤية

اختيار النظام الأساسي: Android‏ iOS‏ JavaScript‏

توضّح لك هذه الصفحة كيفية التحكّم في الجوانب التالية من "العلامات المتقدّمة":

  • ضبط سلوك التصادم لعلامة
  • ضبط ارتفاع العلامة
  • التحكّم في ظهور العلامات حسب مستوى تكبير الخريطة

ضبط سلوك التصادم لعلامة

يتحكّم سلوك التصادم في كيفية عرض العلامة في حال تداخلها مع علامة أخرى. لا يتوفّر سلوك التصادم إلا في الخرائط الاتجاهية.

لضبط سلوك التصادم، اضبط 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: { lat, lng },
    collisionBehavior,
});
mapElement.appendChild(advancedMarker);

JavaScript

const advancedMarker = new AdvancedMarkerElement({
    position: { lat, lng },
    collisionBehavior,
});
mapElement.appendChild(advancedMarker);

ضبط ارتفاع العلامة

على الخرائط الاتجاهية، يمكنك ضبط الارتفاع الذي تظهر عنده العلامة. ويُعدّ ذلك مفيدًا لعرض العلامات بشكل صحيح في ما يتعلّق بمحتوى الخريطة الثلاثية الأبعاد. لضبط ارتفاع العلامة، حدِّد LatLngAltitude كقيمة للخيار MarkerView.position:

TypeScript

const pin = new PinElement({
    background: '#4b2e83',
    borderColor: '#b7a57a',
    glyphColor: '#b7a57a',
    scale: 2.0,
});

const marker = new AdvancedMarkerElement({
    // Set altitude to 20 meters above the ground.
    position: {
        lat: 47.65170843460547,
        lng: -122.30754,
        altitude: 20,
    },
});
marker.append(pin);

mapElement.append(marker);

JavaScript

const pin = new PinElement({
    background: '#4b2e83',
    borderColor: '#b7a57a',
    glyphColor: '#b7a57a',
    scale: 2.0,
});

const marker = new AdvancedMarkerElement({
    // Set altitude to 20 meters above the ground.
    position: {
        lat: 47.65170843460547,
        lng: -122.30754,
        altitude: 20,
    },
});
marker.append(pin);

mapElement.append(marker);

التحكّم في ظهور العلامات حسب مستوى تكبير الخريطة

اطّلِع على التغيير في مستوى ظهور العلامات (ابدأ بالتصغير):

للتحكّم في مستوى ظهور علامة متقدّمة، أنشئ مستمعًا من النوع zoom_changed وأضِف دالة شرطية لضبط AdvancedMarkerElement.map على null إذا تجاوز مستوى التكبير المستوى المحدّد، كما هو موضّح في المثال التالي:

TypeScript

mapElement.innerMap.addListener('zoom_changed', () => {
    const zoom = mapElement.innerMap.getZoom();
    for (let i = 0; i < markers.length; i++) {
        const { position, minZoom } = markerOptions[i];
        markers[i].position = zoom! > minZoom ? position : null;
    }
});

JavaScript

mapElement.innerMap.addListener('zoom_changed', () => {
    const zoom = mapElement.innerMap.getZoom();
    for (let i = 0; i < markers.length; i++) {
        const { position, minZoom } = markerOptions[i];
        markers[i].position = zoom > minZoom ? position : null;
    }
});

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

جعل العلامات قابلة للنقر وسهلة الوصول