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

प्लैटफ़ॉर्म चुनें: 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" होगा.