التحكّم في الخريطة والكاميرا

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

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

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

يمكنك حصر الحدود الجغرافية للكاميرا من خلال ضبط الخيار 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();

مسارات الكاميرا المُعدّة مسبقًا

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

تتيح "خرائط ثلاثية الأبعاد" في 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 },
      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>، ستكون معالجة الإيماءات "جشعة".