জুম এবং প্যান নিয়ন্ত্রণ করা

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

সংক্ষিপ্ত বিবরণ

একটি ওয়েব পেজে মানচিত্র ব্যবহারের ক্ষেত্রে, ব্যবহারকারীরা কীভাবে জুম এবং প্যান করতে পারবে তা নিয়ন্ত্রণ করার জন্য নির্দিষ্ট কিছু অপশনের প্রয়োজন হতে পারে। এই অপশনগুলো, যেমন gestureHandling , minZoom , maxZoom এবং restriction , MapOptions ইন্টারফেসের মধ্যে সংজ্ঞায়িত করা হয়।

ডিফল্ট আচরণ

নিম্নলিখিত মানচিত্রটি এমন একটি মানচিত্রের ডিফল্ট আচরণ প্রদর্শন করে, যা শুধুমাত্র zoom এবং center অপশন সংজ্ঞায়িত করে ইনস্ট্যানশিয়েট করা হয়েছে।

এই ম্যাপটির কোড নিচে দেওয়া হলো।

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

new google.maps.Map(document.getElementById("map")!, {
  zoom,
  center,
});
index.ts

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

new google.maps.Map(document.getElementById("map"), {
  zoom,
  center,
});
index.js

অঙ্গভঙ্গি পরিচালনা নিয়ন্ত্রণ

যখন কোনো ব্যবহারকারী মানচিত্রযুক্ত কোনো পৃষ্ঠা স্ক্রল করেন, তখন এই স্ক্রলিং ক্রিয়ার ফলে মানচিত্রটি অনিচ্ছাকৃতভাবে জুম হয়ে যেতে পারে। gestureHandling ম্যাপ অপশনটি ব্যবহার করে এই আচরণটি নিয়ন্ত্রণ করা যায়।

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

নিচের মানচিত্রটিতে জেসচারহ্যান্ডলিং (gestureHandling) অপশনটি cooperative হিসেবে সেট করা আছে, যা ব্যবহারকারীকে মানচিত্রটি জুম বা প্যান না করেই স্বাভাবিকভাবে পৃষ্ঠাটি স্ক্রল করার সুযোগ দেয়। ব্যবহারকারীরা জুম কন্ট্রোলগুলিতে ক্লিক করে মানচিত্রটি জুম করতে পারেন। টাচস্ক্রিন ডিভাইসের ক্ষেত্রে, তাঁরা মানচিত্রের উপর দুটি আঙুল ব্যবহার করেও জুম এবং প্যান করতে পারেন।

এই ম্যাপটির কোড নিচে দেওয়া হলো।

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

new google.maps.Map(document.getElementById("map")!, {
  zoom,
  center,
  gestureHandling: "cooperative",
});
index.ts

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

new google.maps.Map(document.getElementById("map"), {
  zoom,
  center,
  gestureHandling: "cooperative",
});
index.js

নমুনা দেখুন

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

gestureHandling অপশন ছাড়া পৃষ্ঠার শীর্ষে থাকা মানচিত্রটির আচরণ, gestureHandling-কে cooperative তে সেট করা তার পূর্ববর্তী মানচিত্রটির মতোই, কারণ এই পৃষ্ঠার সমস্ত মানচিত্র একটি <iframe> এর মধ্যে রয়েছে। ডিফল্ট gestureHandling মানটি, মানচিত্রটি একটি <iframe> এর মধ্যে আছে কি না তার উপর ভিত্তি করে, auto greedy এবং cooperative মধ্যে পরিবর্তিত হয়।

<iframe> এর মধ্যে থাকা মানচিত্র আচরণ
হ্যাঁ cooperative
না greedy

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

নিচে gestureHandling-কে greedy তে সেট করা একটি ম্যাপ দেওয়া হলো। এই ম্যাপটি cooperative মতো নয়, বরং সমস্ত টাচ জেসচার এবং স্ক্রল ইভেন্টে সাড়া দেয়।

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

ম্যাপে জেসচার নিষ্ক্রিয় করতে জেসচারহ্যান্ডলিং অপশনটি none এ সেট করা যেতে পারে।

প্যান এবং জুম নিষ্ক্রিয় করা

ম্যাপের প্যান ও জুম করার ক্ষমতা সম্পূর্ণরূপে নিষ্ক্রিয় করতে হলে, gestureHandling এবং zoomControl এই দুটি অপশন অবশ্যই অন্তর্ভুক্ত করতে হবে।

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

new google.maps.Map(document.getElementById("map")!, {
  zoom,
  center,
  gestureHandling: "none",
  zoomControl: false,
});
index.ts

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

new google.maps.Map(document.getElementById("map"), {
  zoom,
  center,
  gestureHandling: "none",
  zoomControl: false,
});
index.js

নিচের মানচিত্রটি উপরের কোডে gestureHandling এবং zoomControl- এর সমন্বয় প্রদর্শন করে।

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

জেসচার ও জুম কন্ট্রোল চালু রেখে ম্যাপটিকে একটি নির্দিষ্ট সীমানা বা সর্বনিম্ন ও সর্বোচ্চ জুমে সীমাবদ্ধ রাখা প্রয়োজন হতে পারে। এটি করার জন্য আপনি restriction , minZoom , এবং maxZoom অপশনগুলো সেট করতে পারেন। নিচের কোড এবং ম্যাপটিতে এই অপশনগুলো দেখানো হয়েছে।

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

new google.maps.Map(document.getElementById("map")!, {
  zoom,
  center,
  minZoom: zoom - 3,
  maxZoom: zoom + 3,
  restriction: {
    latLngBounds: {
      north: -10,
      south: -40,
      east: 160,
      west: 100,
    },
  },
});
index.ts

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

new google.maps.Map(document.getElementById("map"), {
  zoom,
  center,
  minZoom: zoom - 3,
  maxZoom: zoom + 3,
  restriction: {
    latLngBounds: {
      north: -10,
      south: -40,
      east: 160,
      west: 100,
    },
  },
});
index.js