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

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

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

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

इलाके का दायरा सीमित करना

bounds विकल्प सेट करके, कैमरे की भौगोलिक सीमाओं को सीमित किया जा सकता है.

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

TypeScript

async function init() {
    const { Map3DElement } = await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: { lat: -36.86, lng: 174.76, altitude: 10000 },
        tilt: 67.5,
        mode: 'HYBRID',
        bounds: { south: -48.3, west: 163.56, north: -32.86, east: -180 },
        gestureHandling: 'COOPERATIVE',
    });

    document.body.append(map);
}

void init();

JavaScript

async function init() {
    const { Map3DElement } = await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: { lat: -36.86, lng: 174.76, altitude: 10000 },
        tilt: 67.5,
        mode: 'HYBRID',
        bounds: { south: -48.3, west: 163.56, north: -32.86, east: -180 },
        gestureHandling: 'COOPERATIVE',
    });

    document.body.append(map);
}

void init();

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
html,
map {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

HTML

<html>
    <head>
        <title>Map</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
                key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8"
            });
        </script>
    </head>
    <body>
        <div id="map"></div>
    </body>
</html>

नमूना आज़माएं

कैमरे की गतिविधि सीमित करना

इनमें से कोई भी विकल्प सेट करके, कैमरे की गतिविधि को सीमित किया जा सकता है:

  • 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

"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" होगा.