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

आपके पास कैमरे के पैन, ज़्यादा से ज़्यादा ऊंचाई को कंट्रोल करने या अक्षांश और देशांतर की सीमाएं तय करने का विकल्प होता है. इससे किसी मैप में उपयोगकर्ता की गतिविधि को सीमित किया जा सकता है. कैमरे के इस्तेमाल पर पाबंदियां लगाकर, ऐसा किया जा सकता है.

यहां दिए गए उदाहरण में, कैमरे की गतिविधि को सीमित करने के लिए, जगह की सीमाएं सेट किया गया मैप दिखाया गया है:

मैप के दायरे को सीमित करना

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();

जेस्चर कंट्रोल करने की सुविधा

जब कोई उपयोगकर्ता, मैप वाले पेज को स्क्रोल करता है, तो स्क्रोल करने की कार्रवाई से गलती से मैप ज़ूम हो सकता है. 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> के अंदर नहीं है, तो जेस्चर हैंडलिंग "ग्रीडी" होगी.