कैमरे के व्यू और सीमाओं को सीमित करना

प्लैटफ़ॉर्म चुनें: 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, कैमरे के पाथ के लिए दो प्रीसेट उपलब्ध कराता है. ऐनिमेशन की अवधि बदलकर (इससे स्पीड बढ़ाई या घटाई जा सकती है) या उन्हें मिलाकर, कैमरे के पाथ को पसंद के मुताबिक बनाया जा सकता है. इससे, सिनेमा जैसा अनुभव मिलता है. इसके अलावा, 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});
}

जेस्चर हैंडलिंग को कंट्रोल करना

जब कोई उपयोगकर्ता, मैप वाले पेज को स्क्रोल करता है, तो स्क्रोल करने की वजह से, मैप गलती से ज़ूम हो सकता है. gestureHandling मैप विकल्प सेट करके, इस व्यवहार को कंट्रोल किया जा सकता है.

gestureHandling: cooperative

"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

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

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