मैप और कैमरे को कंट्रोल करना

प्लैटफ़ॉर्म चुनें: 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();

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

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

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 },
      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 को दबाकर रख सकते हैं.

यहां दिए गए कोड में, जेस्चर हैंडलिंग को "cooperative" पर सेट करने का तरीका दिखाया गया है:

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

gestureHandling: greedy

"Greedy" जेस्चर हैंडलिंग, सभी स्क्रोल इवेंट और टच जेस्चर पर प्रतिक्रिया देती है.

gestureHandling: auto

"ऑटो" जेस्चर हैंडलिंग से, मैप के व्यवहार में बदलाव होता है. यह इस बात पर निर्भर करता है कि मैप, <iframe> में शामिल है या नहीं. साथ ही, यह भी देखा जाता है कि पेज को स्क्रोल किया जा सकता है या नहीं.

• अगर मैप <iframe> के अंदर है, तो जेस्चर हैंडलिंग "कोऑपरेटिव" होगी.
• अगर मैप <iframe> के अंदर नहीं है, तो जेस्चर हैंडलिंग "ग्रीडी" होगी.