تحريك مسارات الكاميرا

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

يمكنك إضافة صور متحركة لمسارات الكاميرا إلى خريطتك الثلاثية الأبعاد لتوفير تجربة أكثر غامرة للمستخدِمين. يمكن أن تنتقل الصور المتحركة لمسار الكاميرا إلى نقطة على الخريطة أو تدور حولها.

يجمع المثال التالي بين الصورتَين المتحركتَين flyCameraTo وflyCameraAround:

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

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

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

• تنقل الصورة المتحركة 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});
}