कैमरे के पाथ को ऐनिमेट करना

प्लैटफ़ॉर्म चुनें: Android iOS JavaScript

अपने 3D मैप में कैमरा पाथ ऐनिमेशन जोड़े जा सकते हैं. इससे, उपयोगकर्ताओं को ज़्यादा इमर्सिव अनुभव मिलता है. कैमरा पाथ ऐनिमेशन, मैप पर किसी पॉइंट के ऊपर से उड़ सकते हैं या उसके चारों ओर घूम सकते हैं.

यहां दिए गए उदाहरण में, flyCameraTo और flyCameraAround ऐनिमेशन को एक साथ इस्तेमाल करने का तरीका बताया गया है:

कैमरे के पाथ के लिए प्रीसेट

Maps JavaScript में 3D Maps की सुविधा, कैमरे के दो प्रीसेट पाथ उपलब्ध कराती है. एनिमेशन की अवधि बदलकर, कैमरा पाथ को पसंद के मुताबिक बनाया जा सकता है. इससे स्पीड बढ़ाई या कम की जा सकती है. इसके अलावा, कैमरा पाथ को मिलाकर ज़्यादा सिनेमैटिक अनुभव भी बनाए जा सकते हैं. इसके अलावा, altitudeMode की वैल्यू सेट करके कैमरे की ऊँचाई को कंट्रोल किया जा सकता है.

Maps JavaScript में 3D Maps की सुविधा के साथ, कैमरा पाथ के ये विकल्प काम करते हैं:

• 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});
}