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

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

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

إتاحة النقر على العلامات وتسهيل الوصول إليها