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

اختيار النظام الأساسي: نظام التشغيل 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: new google.maps.LatLng({ lat, lng }),
  map,
  collisionBehavior: collisionBehavior,
});
index.ts

JavaScript

const advancedMarker = new AdvancedMarkerElement({
  position: new google.maps.LatLng({ lat, lng }),
  map,
  collisionBehavior: collisionBehavior,
});

index.js

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

في الخرائط المتجهّة، يمكنك ضبط الارتفاع الذي يظهر عنده علامة. هذا هو في جعل العلامات تظهر بشكل صحيح فيما يتعلق بمحتوى الخريطة ثلاثية الأبعاد. لضبط الارتفاع لموقع علامة، حدِّد 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,
});
index.ts

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 },
});
index.js

التحكم في رؤية العلامة حسب مستوى تكبير/تصغير الخريطة

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

للتحكّم في إذن الوصول إلى "محدِّد متقدّمة"، أنشئ 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;
    }
});
index.ts

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;
  }
});
index.js

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

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