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

ওভারভিউ

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

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

gestureHandling: greedy

greedy সেট করা অঙ্গভঙ্গি হ্যান্ডলিং সহ একটি মানচিত্র নীচে রয়েছে৷ এই মানচিত্রটি cooperative বিপরীতে সমস্ত স্পর্শ অঙ্গভঙ্গি এবং স্ক্রোল ইভেন্টগুলিতে প্রতিক্রিয়া জানায়৷

অঙ্গভঙ্গি হ্যান্ডলিং: none

ম্যাপে অঙ্গভঙ্গি নিষ্ক্রিয় করার জন্য অঙ্গভঙ্গি হ্যান্ডলিং বিকল্পটি none সেট করা যেতে পারে।

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

মানচিত্রটিকে প্যান এবং জুম করার ক্ষমতা সম্পূর্ণরূপে অক্ষম করতে, দুটি বিকল্প, অঙ্গভঙ্গি হ্যান্ডলিং এবং জুমকন্ট্রোল অন্তর্ভুক্ত করতে হবে৷

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

নীচের মানচিত্রটি উপরের কোডে অঙ্গভঙ্গি হ্যান্ডলিং এবং জুম কন্ট্রোলের সংমিশ্রণ প্রদর্শন করে।

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

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

ওভারভিউ

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

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

gestureHandling: greedy

greedy সেট করা অঙ্গভঙ্গি হ্যান্ডলিং সহ একটি মানচিত্র নীচে রয়েছে৷ এই মানচিত্রটি cooperative বিপরীতে সমস্ত স্পর্শ অঙ্গভঙ্গি এবং স্ক্রোল ইভেন্টগুলিতে প্রতিক্রিয়া জানায়৷

অঙ্গভঙ্গি হ্যান্ডলিং: none

ম্যাপে অঙ্গভঙ্গি নিষ্ক্রিয় করার জন্য অঙ্গভঙ্গি হ্যান্ডলিং বিকল্পটি none সেট করা যেতে পারে।

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

মানচিত্রটিকে প্যান এবং জুম করার ক্ষমতা সম্পূর্ণরূপে অক্ষম করতে, দুটি বিকল্প, অঙ্গভঙ্গি হ্যান্ডলিং এবং জুমকন্ট্রোল অন্তর্ভুক্ত করতে হবে৷

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

নীচের মানচিত্রটি উপরের কোডে অঙ্গভঙ্গি হ্যান্ডলিং এবং জুম কন্ট্রোলের সংমিশ্রণ প্রদর্শন করে।

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

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