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

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

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

একটি ওয়েব পৃষ্ঠায় একটি মানচিত্র ব্যবহারের জন্য ব্যবহারকারীরা জুম এবং প্যান করার জন্য মানচিত্রের সাথে কীভাবে ইন্টারঅ্যাক্ট করে তা নিয়ন্ত্রণ করার জন্য নির্দিষ্ট বিকল্পগুলির প্রয়োজন হতে পারে। এই বিকল্পগুলি, যেমন 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 map" বিকল্পটি ব্যবহার করে নিয়ন্ত্রণ করা যেতে পারে।

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

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

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

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

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 মানটি auto greedy এবং cooperative এর মধ্যে স্যুইচ করে যা মানচিত্রটি একটি <iframe> এর মধ্যে রয়েছে কিনা তার উপর নির্ভর করে।

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

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

নিচে gestureHandling কে greedy তে সেট করা একটি মানচিত্র দেওয়া হল। এই মানচিত্রটি cooperative বিপরীতে সমস্ত স্পর্শ অঙ্গভঙ্গি এবং স্ক্রোল ইভেন্টের প্রতি প্রতিক্রিয়া দেখায়।

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

মানচিত্রে অঙ্গভঙ্গি নিষ্ক্রিয় করার জন্য gestureHandling বিকল্পটি 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 এর সমন্বয় প্রদর্শন করে।

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

অঙ্গভঙ্গি এবং জুম নিয়ন্ত্রণের অনুমতি দেওয়া যেতে পারে কিন্তু মানচিত্রটিকে একটি নির্দিষ্ট সীমানা বা সর্বনিম্ন এবং সর্বোচ্চ জুমের মধ্যে সীমাবদ্ধ রাখতে হবে। এটি সম্পন্ন করার জন্য আপনি সীমাবদ্ধতা , 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