تقييد شاشة الكاميرا وحدودها

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

قد يكون من المستحسن التحكّم في حركة الكاميرا الأفقية أو أقصى ارتفاع لها، أو إنشاء حدود لخطوط الطول والعرض تقيّد حركة المستخدم في خريطة معيّنة. يمكنك إجراء ذلك باستخدام قيود الكاميرا.

يعرض المثال التالي خريطة تتضمّن حدودًا للموقع الجغرافي تم ضبطها للحدّ من حركة الكاميرا:

تقييد حدود الخريطة

يمكنك تقييد الحدود الجغرافية للكاميرا من خلال ضبط الخيار bounds.

يوضّح نموذج الرمز البرمجي التالي كيفية تقييد حدود الخريطة:

async function init() {
  const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: { lat: 37.7704, lng: -122.3985, altitude: 500 },
    tilt: 67.5,
    mode: MapMode.HYBRID,
    bounds: {south: 37, west: -123, north: 38, east: -121}
  });

init();
}

تقييد الكاميرا

يمكنك تقييد حركة الكاميرا من خلال ضبط أيّ من الخيارات التالية:

• maxAltitude
• minAltitude
• maxHeading
• minHeading
• maxTilt
• minTilt

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

async function init() {
  const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: { lat: 37.7704, lng: -122.3985, altitude: 500 },
    tilt: 67.5,
    mode: MapMode.HYBRID,
    minAltitude: 1,
    maxAltitude: 1000,
    minTilt: 35,
    maxTilt: 55
  });

 document.body.append(map);
}

init();

تقييد حدود الخريطة والكاميرا

يمكنك في الوقت نفسه تقييد حدود الخريطة والكاميرا. يوضّح نموذج الرمز البرمجي التالي كيفية تقييد حدود الخريطة والكاميرا:

async function init() {
  const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: { lat: 37.7704, lng: -122.3985, altitude: 500 },
    tilt: 67.5,
    mode: MapMode.HYBRID,
    minAltitude: 1,
    maxAltitude: 1000,
    minTilt: 35,
    maxTilt: 55,
    bounds: {south: 37, west: -123, north: 38, east: -121}
  });

 document.body.append(map);
}

init();

مسارات الكاميرا المضبوطة مسبقًا

توفّر "خرائط Google" في Maps JavaScript مسارَين للكاميرا مضبوطَين مسبقًا. يمكن تخصيص مسارات الكاميرا من خلال تغيير مدة الصورة المتحركة (وبالتالي زيادة السرعة أو تقليلها)، أو من خلال الجمع بينها لإنشاء تجارب أكثر سينمائية. بالإضافة إلى ذلك، يمكنك التحكّم في ارتفاع الكاميرا من خلال تحديد altitudeMode.

تتوافق "خرائط Google" في Maps JavaScript مع مسارات الكاميرا التالية:

• تنقل الصورة المتحركة flyCameraTo من مركز الخريطة إلى وجهة محدّدة.
• تدور الصورة المتحركة flyCameraAround حول نقطة على الخريطة بالعدد المحدّد من الدورات.

يمكن الجمع بين المسارَين المتاحَين للانتقال إلى نقطة اهتمام والتدوير حولها، ثم التوقف عند تحديد ذلك.

الانتقال إلى

يوضّح عينة تعليمات برمجية التالي كيفية تحريك الكاميرا للانتقال إلى موقع جغرافي:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraTo({
    endCamera: {
      center: { lat: 37.6191, lng: -122.3816, altitude: 500 },
      altitudeMode: 'RELATIVE_TO_GROUND',
      tilt: 67.5,
      range: 1000
    },
    durationMillis: 5000
  });
}

التحليق حول

يوضّح نموذج الرمز البرمجي التالي كيفية تحريك الكاميرا للتحليق حول موقع جغرافي:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraAround({
    camera,
    durationMillis: 60000,
    repeatCount: 1
  });
}

الجمع بين الصور المتحركة

يوضّح نموذج الرمز البرمجي التالي كيفية الجمع بين الصور المتحركة لنقل الكاميرا إلى موقع جغرافي، ثم تدويرها حول الموقع الجغرافي عند انتهاء الصورة المتحركة الأولى:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraTo({
    endCamera: flyToCamera,
    durationMillis: 5000,
  });

  map.addEventListener('gmp-animationend', () => {
    map.flyCameraAround({
      camera: flyToCamera,
      durationMillis: 60000,
      repeatCount: 1
    });
  }, {once: true});
}

التحكّم في معالجة الإيماءات

عندما يمرّر المستخدم صفحة تحتوي على خريطة، يمكن أن يؤدي إجراء التمرير إلى تكبير الخريطة عن غير قصد. يمكنك التحكّم في هذا السلوك من خلال ضبط خيار الخريطة gestureHandling.

gestureHandling: cooperative

تسمح معالجة الإيماءات "التعاونية" للمستخدم بتمرير الصفحة بدون التأثير في مستوى تكبير الخريطة أو عرضها الشامل. للتكبير، يمكن للمستخدمين استخدام عناصر التحكّم أو إيماءات الإصبعَين (للأجهزة التي تعمل باللمس) أو الضغط مع الاستمرار على CMD/CTRL أثناء التمرير.

يوضّح الرمز البرمجي التالي كيفية ضبط معالجة الإيماءات على "تعاونية":

new Map3DElement({
  center: { lat: 37.729901343702736, lng: -119.63788444355905, altitude: 1500 },
  tilt: 70,
  heading: 50,
  range: 4000,
  gestureHandling: 'COOPERATIVE',
});

gestureHandling: greedy

تتفاعل معالجة الإيماءات "الجامدة" مع جميع أحداث التمرير والإيماءات التي يتم تنفيذها باللمس.

gestureHandling: auto

تغيّر معالجة الإيماءات "التلقائية" سلوك الخريطة استنادًا إلى ما إذا كانت الخريطة مضمّنة في <iframe> وما إذا كانت الصفحة قابلة للتمرير.

• إذا كانت الخريطة ضمن <iframe>، ستكون معالجة الإيماءات "تعاونية".
• إذا لم تكن الخريطة ضمن <iframe>، ستكون معالجة الإيماءات "جامدة".