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

اختيار النظام الأساسي: 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;
    }
});

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

جعل العلامات قابلة للنقر ويمكن الوصول إليها