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

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

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

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

इलाके के दायरे पर पाबंदी लगाना

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

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

TypeScript

async function init(): Promise<void> {
    await google.maps.importLibrary('maps3d');

    const map3DElement = document.querySelector('gmp-map-3d')!;

    // Restrict the position of the camera to the specified bounds.
    map3DElement.bounds = {
        south: -48.3,
        west: 163.56,
        north: -32.86,
        east: -180,
    };
}

void init();

JavaScript

async function init() {
    await google.maps.importLibrary('maps3d');

    const map3DElement = document.querySelector('gmp-map-3d');

    // Restrict the position of the camera to the specified bounds.
    map3DElement.bounds = {
        south: -48.3,
        west: 163.56,
        north: -32.86,
        east: -180,
    };
}

void init();

CSS

html,
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: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <gmp-map-3d
            id="gmp-map-3d"
            center="-47.1375,169.5235,150000"
            tilt="67.5"
            mode="hybrid"
            gesture-handling="cooperative">
        </gmp-map-3d>
    </body>
</html>

कैमरे की गतिविधि पर पाबंदी लगाना

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

  • maxAltitude
  • minAltitude
  • maxHeading
  • minHeading
  • maxTilt
  • minTilt

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

// Restrict the movement of the camera.
map3DElement.maxAltitude = 1000;
map3DElement.minAltitude = 500;
map3DElement.maxTilt = 55;
map3DElement.minTilt = 35;

मैप और कैमरे के दायरे पर पाबंदी लगाना

मैप और कैमरे के दायरे, दोनों पर एक साथ पाबंदी लगाई जा सकती है. यहां दिए गए कोड के नमूने में, मैप और कैमरे के दायरे, दोनों पर पाबंदी लगाने का तरीका दिखाया गया है:

// Restrict the movement of the camera.
map3DElement.maxAltitude = 1000;
map3DElement.minAltitude = 500;
map3DElement.maxTilt = 55;
map3DElement.minTilt = 35;

// Restrict the position of the camera to the specified bounds.
map3DElement.bounds = {
    north: 20.93,
    west: -156.38,
    south: 20.90,
    east: -156.31,
};

हाथ के जेस्चर को कंट्रोल करना

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

gestureHandling: cooperative

"Cooperative" जेस्चर हैंडलिंग की मदद से, उपयोगकर्ता मैप को ज़ूम या पैन किए बिना पेज को स्क्रोल कर सकता है. ज़ूम करने के लिए, उपयोगकर्ता कंट्रोल, दो उंगलियों वाले जेस्चर (टचस्क्रीन वाले डिवाइसों के लिए) या स्क्रोल करते समय CMD/CTRL को दबाकर रख सकते हैं.

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

<gmp-map-3d
    id="gmp-map-3d"
    center="20.92,-156.36,500"
    tilt="67.5"
    mode="hybrid"
    gesture-handling="cooperative">
</gmp-map-3d>

gestureHandling: greedy

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

gestureHandling: auto

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

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