ক্যামেরার দৃশ্য এবং সীমানা সীমাবদ্ধ করুন

প্ল্যাটফর্ম নির্বাচন করুন: অ্যান্ড্রয়েড আইওএস জাভাস্ক্রিপ্ট

একটি নির্দিষ্ট মানচিত্রে ক্যামেরার প্যান ও সর্বোচ্চ উচ্চতা নিয়ন্ত্রণ করা, অথবা ব্যবহারকারীর চলাচল সীমিত করার জন্য অক্ষাংশ ও দ্রাঘিমাংশের সীমানা তৈরি করা আপনার জন্য সুবিধাজনক হতে পারে। আপনি ক্যামেরা রেস্ট্রিকশন ব্যবহার করে এটি করতে পারেন।

নিম্নলিখিত উদাহরণটিতে এমন একটি মানচিত্র দেখানো হয়েছে যেখানে ক্যামেরার চলাচল সীমিত করার জন্য অবস্থানের সীমানা নির্ধারণ করা হয়েছে:

মানচিত্রের সীমানা সীমাবদ্ধ করুন

আপনি bounds অপশন সেট করে ক্যামেরার ভৌগোলিক সীমানা সীমাবদ্ধ করতে পারেন।

নিম্নলিখিত কোড নমুনাটি ম্যাপের সীমানা সীমাবদ্ধ করার পদ্ধতি প্রদর্শন করে:

টাইপস্ক্রিপ্ট 

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

জাভাস্ক্রিপ্ট 

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

সিএসএস 

/* 
 * 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>
    <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 ম্যাপ অপশনটি সেট করার মাধ্যমে এই আচরণটি নিয়ন্ত্রণ করতে পারেন।

অঙ্গভঙ্গি পরিচালনা: cooperative

"সহযোগী" অঙ্গভঙ্গি নিয়ন্ত্রণ ব্যবস্থা ব্যবহারকারীকে ম্যাপের জুম বা প্যানকে প্রভাবিত না করেই পৃষ্ঠাটি স্ক্রল করার সুযোগ দেয়। জুম করার জন্য, ব্যবহারকারীরা কন্ট্রোল, দুই-আঙুলের অঙ্গভঙ্গি (টাচস্ক্রিন ডিভাইসের জন্য), অথবা স্ক্রল করার সময় CMD/CTRL চেপে ধরে রাখতে পারেন।

নিম্নলিখিত কোডটি জেসচার হ্যান্ডলিংকে 'কোঅপারেটিভ' মোডে সেট করার পদ্ধতি প্রদর্শন করে:

new Map3DElement({
  center: { lat: 37.729901343702736, lng: -119.63788444355905, altitude: 1500 },
  tilt: 70,
  heading: 50,
  range: 4000,
  gestureHandling: 'COOPERATIVE',
});

অঙ্গভঙ্গি পরিচালনা: greedy

"গ্রিডি" জেসচার হ্যান্ডলিং সমস্ত স্ক্রোল ইভেন্ট এবং টাচ জেসচারে সাড়া দেয়।

অঙ্গভঙ্গি পরিচালনা: auto

"অটো" জেসচার হ্যান্ডলিং ম্যাপের আচরণ পরিবর্তন করে, যা নির্ভর করে ম্যাপটি একটি <iframe> এর মধ্যে আছে কি না এবং পেজটি স্ক্রলযোগ্য কি না তার উপর।

  • যদি ম্যাপটি একটি <iframe> এর মধ্যে থাকে, তাহলে জেসচার হ্যান্ডলিং 'কোঅপারেটিভ' হবে।
  • যদি ম্যাপটি কোনো <iframe> মধ্যে না থাকে, তাহলে জেসচার হ্যান্ডলিং "গ্রিডি" হবে।