মানচিত্র এবং ক্যামেরা নিয়ন্ত্রণ করুন

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

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

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

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

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

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

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,
    bounds: {south: 37, west: -123, north: 38, east: -121}
  });

init();
}

ক্যামেরা সীমাবদ্ধ করুন

আপনি নিম্নলিখিত যেকোনো বিকল্প সেট করে ক্যামেরার চলাচল সীমিত করতে পারেন:

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

ক্যামেরার পাথগুলি প্রিসেট করুন

ম্যাপস জাভাস্ক্রিপ্টে 3D ম্যাপ দুটি প্রিসেট ক্যামেরা পাথ প্রদান করে। অ্যানিমেশনের সময়কাল পরিবর্তন করে (যার ফলে গতি বৃদ্ধি বা হ্রাস করা যায়), অথবা আরও সিনেমাটিক অভিজ্ঞতা তৈরি করতে তাদের একত্রিত করে ক্যামেরা পাথগুলি কাস্টমাইজ করা যেতে পারে।

ম্যাপস জাভাস্ক্রিপ্টে 3D ম্যাপস নিম্নলিখিত ক্যামেরা পাথগুলিকে সমর্থন করে:

• flyCameraTo অ্যানিমেশন মানচিত্র কেন্দ্র থেকে একটি নির্দিষ্ট গন্তব্যে উড়ে যায়।
• flyCameraAround অ্যানিমেশন মানচিত্রে নির্দিষ্ট সংখ্যক ঘূর্ণনের মাধ্যমে একটি বিন্দুর চারপাশে ঘোরে।

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

উড়ে যাও

নিচের কোড নমুনাটি ক্যামেরাটিকে একটি স্থানে উড়ে যাওয়ার জন্য অ্যানিমেট করার পদ্ধতি প্রদর্শন করে:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraTo({
    endCamera: {
      center: { lat: 37.6191, lng: -122.3816 },
      tilt: 67.5,
      range: 1000
    },
    durationMillis: 5000
  });
}

উড়ে বেড়াও

নিচের কোড নমুনাটি ক্যামেরাটিকে একটি অবস্থানের চারপাশে উড়তে অ্যানিমেট করার পদ্ধতি প্রদর্শন করে:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraAround({
    camera,
    durationMillis: 60000,
    repeatCount: 1
  });
}

অ্যানিমেশন একত্রিত করুন

নিচের কোড নমুনাটি অ্যানিমেশনগুলিকে একত্রিত করে ক্যামেরাটিকে একটি স্থানে নিয়ে যাওয়ার পদ্ধতি প্রদর্শন করে এবং তারপর প্রথম অ্যানিমেশনটি শেষ হলে অবস্থানের চারপাশে ঘোরায়:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraTo({
    endCamera: flyToCamera,
    durationMillis: 5000,
  });

  map.addEventListener('gmp-animationend', () => {
    map.flyCameraAround({
      camera: flyToCamera,
      durationMillis: 60000,
      repeatCount: 1
    });
  }, {once: true});
}

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

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

অঙ্গভঙ্গি পরিচালনা: 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> এর মধ্যে না থাকে, তাহলে অঙ্গভঙ্গি পরিচালনা "লোভী" হবে।