স্থানীয় প্রসঙ্গ এবং মানচিত্র বিকল্প সেট করা

এই বিভাগে আপনি একটি LocalContextMapView দৃষ্টান্তে সেট করতে পারেন এমন বিকল্পগুলি এবং LocalContextMapView দ্বারা অন্তর্নিহিত Map কভার করে। আপনি যখন একটি নতুন LocalContextMapView ইন্সট্যান্স তৈরি করেন, তখন আপনি 10 ধরনের জায়গা নির্দিষ্ট করেন, সাথে ফেরার জন্য সর্বাধিক সংখ্যক জায়গা (24টি পর্যন্ত)। অভ্যন্তরীণ Map জাভাস্ক্রিপ্ট API Map হিসাবে একই MapOptions সমর্থন করে।

স্থানীয় প্রসঙ্গ লাইব্রেরি শুরু হওয়ার পরে আপনি যে কোনো সময় স্থানীয় প্রসঙ্গ অনুসন্ধান বৈশিষ্ট্য আপডেট করতে পারেন। maxPlaceCount , placeTypePreferences , locationRestriction , বা locationBias এর যেকোনো একটি আপডেট করা স্বয়ংক্রিয়ভাবে একটি নতুন অনুসন্ধান ট্রিগার করতে পারে৷

স্থানের ধরন নির্দিষ্ট করা

আপনি 10 ধরনের স্থান পর্যন্ত নির্দিষ্ট করতে পারেন যেগুলি স্থানীয় প্রসঙ্গ লাইব্রেরি ফিরে আসা উচিত৷ placeTypePreferences প্রপার্টি ব্যবহার করে এবং এক বা একাধিক স্থানের ধরন পাস করে স্থানের ধরন নির্দিষ্ট করুন, যেমনটি নিম্নলিখিত উদাহরণে দেখানো হয়েছে:

placeTypePreferences: ['restaurant', 'cafe']

প্লেস টাইপ ওয়েটিং

আপনি ঐচ্ছিকভাবে প্রতিটি নির্দিষ্ট প্রকারের জন্য একটি আপেক্ষিক ওজন নির্ধারণ করতে পারেন, যার কারণে উচ্চ ওজনের মান সহ প্রকারগুলি প্রায়শই প্রদর্শিত হয়। ওজন একটি ঐচ্ছিক, উন্নত পরামিতি যা শুধুমাত্র প্রয়োজন হিসাবে ব্যবহার করা উচিত। যখন এই প্যারামিটারটি বাদ দেওয়া হয় তখন স্থানীয় প্রসঙ্গ লাইব্রেরি ডিফল্ট ওজন নির্ধারণ করবে, যা সময়ের সাথে সাথে পরিবর্তিত এবং উন্নত হতে পারে।

weight বৈশিষ্ট্য ব্যবহার করে আপনি প্রতিটি সম্পত্তির একটি আপেক্ষিক ওজন নির্ধারণ করতে পারেন। নিম্নলিখিত উদাহরণটি primary_school তুলনায় দ্বিগুণ restaurant এবং cafe ফলাফল ফেরানোর জন্য নির্দিষ্ট স্থানের প্রকারের ওজন দেখায়:

placeTypePreferences: [{type: 'restaurant', weight: 2}, {type: 'cafe', weight: 2}, {type: 'primary_school', weight: 1}]

একটি নির্দিষ্ট জায়গার ধরন একটি নির্দিষ্ট এলাকায় বিদ্যমান কিনা তার উপর নির্ভর করে ফলাফলগুলি পরিবর্তিত হবে। উদাহরণ স্বরূপ, shopping_mall 10 ওজন নির্ধারণ করলে কোনো প্রভাব পড়বে না যদি এলাকায় কোনো শপিং মল না থাকে।

সর্বোচ্চ স্থান গণনা সেট করা হচ্ছে

লোকাল কনটেক্সট লাইব্রেরির সর্বাধিক সংখ্যক স্থান (24 পর্যন্ত) সেট করতে, maxPlaceCount প্রপার্টি ব্যবহার করুন, যেমনটি এখানে দেখানো হয়েছে:

maxPlaceCount: 12

অবস্থানের সীমাবদ্ধতা সেট করা হচ্ছে

অনুসন্ধানগুলি ডিফল্টরূপে মানচিত্র ভিউপোর্টে আবদ্ধ। আপনি একটি বড় বা ছোট এলাকায় অনুসন্ধান ফলাফল সীমাবদ্ধ করার জন্য সীমার একটি সেট নির্দিষ্ট করতে পারেন। এটি করার জন্য, LocalContextMapView এর locationRestriction বৈশিষ্ট্যটি পছন্দসই LatLngBounds এ সেট করুন। এই মান মানচিত্র ভিউপোর্টের চেয়ে বড় বা ছোট হতে পারে। একটি উদাহরণ দেখুন ।

দিকনির্দেশ সক্রিয় করা হচ্ছে

আপনার মানচিত্রে দিকনির্দেশ সক্রিয় করতে, LocalContextMapView এর directionsOptions বৈশিষ্ট্য সেট করুন, মূল বিন্দুর জন্য একটি LatLng অবজেক্ট আক্ষরিক পাস করে (শেষ বিন্দুটি বর্তমানে নির্বাচিত স্থান দ্বারা নির্ধারিত হয়)। যদি একটি মূল বিন্দু পাস না হয়, দিকনির্দেশ অক্ষম করা হয়। নিম্নলিখিত উদাহরণ একটি মানচিত্রে হাঁটার দিকনির্দেশ সক্ষম করতে একটি মূল বিন্দু সেট দেখায়:

directionsOptions: {origin: {lat: 47.6532809, lng: -122.3512206}},

মানচিত্রের সীমানা এবং জুম স্তর দ্বারা সংজ্ঞায়িত মানচিত্র ভিউপোর্টের আকার, প্রদত্ত মূল বিন্দু থেকে ফেরত আসা দূরত্বগুলিকে সরাসরি প্রভাবিত করে৷ উদাহরণস্বরূপ, যদি ভিউপোর্টটি 100 মাইল চওড়া একটি এলাকা প্রদর্শনের জন্য সেট করা হয়, তবে আগ্রহের পয়েন্টগুলি মূল বিন্দু থেকে 50 মাইল পর্যন্ত প্রদর্শিত হতে পারে। আপনার অ্যাপটি যুক্তিসঙ্গত দূরত্ব সহ হাঁটার রুট ফিরিয়ে দেয় তা নিশ্চিত করতে, আপনি করতে পারেন:

  • নিম্ন জুম স্তরে হাঁটার দিকনির্দেশ অক্ষম করুন (সাধারণত জুম স্তর 16 এর নিচে)।
  • একটি ছোট সীমানা এলাকা ব্যবহার করে একটি locationRestriction সংজ্ঞায়িত করুন। এটি নিষেধাজ্ঞার এলাকার বাইরে যেকোনও জায়গা থেকে আগ্রহের পয়েন্টগুলিকে রাখবে।

দিকনির্দেশের মূল পরিবর্তন করা

আপনি LocalContextMapView এর জীবনচক্র চলাকালীন যেকোনো সময় directionsOptions বৈশিষ্ট্যের মান পরিবর্তন করতে পারেন। নিম্নলিখিত উদাহরণ directionsOptions জন্য একটি নতুন মান সেট করে দেখায়:

localContextMapView.directionsOptions = {
  origin: {lat: 47.6532809, lng: -122.3512206},
};

বা

localContextMapView.directionsOptions.origin = {lat: 47.6532809, lng: -122.3512206};

বিন্যাস এবং দৃশ্যমানতা সেট করা হচ্ছে

আপনি LocalContextMapView এর placeChooserViewSetup এবং placeDetailsViewSetup বৈশিষ্ট্যগুলি সেট করে স্থানের বিশদ বিবরণ এবং স্থান চয়নকারীর জন্য প্রাথমিক লেআউট অবস্থান এবং দৃশ্যমানতার বিকল্পগুলি সেট করতে পারেন। আপনি প্রোগ্রামগতভাবে জায়গার বিশদ বিবরণ লুকিয়ে রাখতে পারেন।

স্থান চয়নকারী লেআউট অবস্থান সেট করা হচ্ছে

আপনি যখন LocalContextMapView শুরু করবেন তখন আপনি স্থান চয়নকারীর লেআউট অবস্থান সেট করতে পারেন। বিন্যাস অবস্থানটি নথির দিকনির্দেশের সাথে সম্পর্কিত, এবং আপনার অ্যাপটি বাম-থেকে-ডান (LTR), বা ডান-থেকে-বামে (RTL) কিনা তার উপর নির্ভর করে পরিবর্তিত হবে।

স্থান চয়নকারীর জন্য তিনটি লেআউট বিকল্প রয়েছে:

  • INLINE_START বিষয়বস্তু প্রবাহের START-এ প্রদর্শনের জন্য স্থান চয়নকারীকে সেট করে (LTR-এর জন্য মানচিত্রের বাম দিকে, RTL-এর জন্য ডানদিকে)।
  • INLINE_END স্থান নির্বাচনকারীকে সামগ্রী প্রবাহের END এ প্রদর্শনের জন্য সেট করে (LTR-এর জন্য মানচিত্রের ডান দিকে, RTL-এর জন্য বাম দিকে)।
  • BLOCK_END পৃষ্ঠার নীচে প্রদর্শন করার জন্য স্থান চয়নকারীকে সেট করে (এটি LTR এবং RTL উভয়ের জন্যই একই)।

যখন আপনি স্থান চয়নকারী অবস্থানটি INLINE_START বা INLINE_END এ সেট করেন, তখন আপনাকে অবশ্যই সর্বদা স্থানের বিশদ দৃশ্যের অবস্থান একই মানতে সেট করতে হবে৷ আপনি ঐচ্ছিকভাবে একটি তথ্য উইন্ডোতে প্রদর্শন করার জন্য স্থানের বিশদ দৃশ্য সেট করতে পারেন। BLOCK_END এর জন্য, স্থানের বিবরণ ভিউ লেআউট মোড অবশ্যই INFO_WINDOW এ সেট থাকতে হবে।

স্থানীয় প্রসঙ্গ লাইব্রেরি LocalContextMapView এর রেন্ডার করা আকারের উপর ভিত্তি করে স্থান চয়নকারীর অবস্থানকে প্রতিক্রিয়াশীলভাবে পরিবর্তন করে। ডিফল্টরূপে, একটি বৃহত্তর LocalContextMapView এ স্থান চয়নকারী সামগ্রী প্রবাহের শুরুতে উপস্থিত হয় (LTR-এর জন্য মানচিত্রের বাম দিকে, RTL-এর জন্য ডানদিকে)। একটি ছোট LocalContextMapView এ (উদাহরণস্বরূপ, একটি মোবাইল ডিভাইসে), মানচিত্রের নীচে স্থান চয়নকারী প্রদর্শন করতে ডিফল্ট পরিবর্তন হয় এবং একটি তথ্য উইন্ডোতে স্থানের বিবরণ প্রদর্শন করে। ব্রাউজার জুম স্তরটি পিক্সেলের মাত্রাগুলিকে প্রভাবিত করে যেখানে চয়নকারীর অবস্থান পাশে এবং নীচের মধ্যে স্থানান্তরিত হয় (থ্রেশহোল্ড জুম স্তরের সাথে আনুপাতিকভাবে বৃদ্ধি পায়)।

আমরা স্থান চয়নকারীর ডিফল্ট অবস্থান কনফিগার করতে কার্যকরী কল ব্যবহার করার পরামর্শ দিই। এই মানগুলি সরাসরি ঘোষণা করলে যেকোন প্রতিক্রিয়াশীল লেআউট পরিবর্তন ওভাররাইড হবে।

বিষয়বস্তুর প্রবাহের শুরুতে স্থান নির্বাচনকারী প্রদর্শন করা হচ্ছে

স্থান চয়নকারীকে বিষয়বস্তুর প্রবাহের শুরুতে উপস্থিত হওয়ার জন্য সেট করতে (LTR-এর জন্য মানচিত্রের বাম দিকে, RTL-এর জন্য ডানদিকে), placeChooserViewSetup এবং placeDetailsViewSetup উভয়ের জন্য position INLINE_START এ সেট করুন, যেমনটি নিম্নলিখিত উদাহরণে দেখানো হয়েছে:

const localContextMapView = new google.maps.localContext.LocalContextMapView({
  // ...
  placeChooserViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {position: 'INLINE_START'};
    }
  },
  placeDetailsViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {position: 'INLINE_START'};
    }
  },
});

বিষয়বস্তুর প্রবাহের শেষে স্থান চয়নকারী প্রদর্শন করা হচ্ছে

স্থান চয়নকারীকে সামগ্রী প্রবাহের শেষে উপস্থিত হওয়ার জন্য সেট করতে (LTR-এর জন্য ডানদিকে, RTL-এর জন্য বাম দিকে), placeChooserViewSetup এবং placeDetailsViewSetup উভয়ের জন্য position INLINE_END এ সেট করুন, যেমনটি নিম্নলিখিত উদাহরণে দেখানো হয়েছে:

const localContextMapView = new google.maps.localContext.LocalContextMapView({
  // ...
  placeChooserViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {position: 'INLINE_END'};
    }
  },
  placeDetailsViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {position: 'INLINE_END'};
    }
  },
});

নীচে স্থান চয়নকারী প্রদর্শন করা হচ্ছে৷

স্থান চয়নকারীকে মানচিত্রের নীচে প্রদর্শনের জন্য সেট করতে, placeChooserViewSetup এর position BLOCK_END এ সেট করুন এবং placeDetailsViewSetup এর layoutMode INFO_WINDOW তে সেট করুন, যেমনটি নিম্নলিখিত উদাহরণে দেখানো হয়েছে:

const localContextMapView = new google.maps.localContext.LocalContextMapView({
  // ...
  placeChooserViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {position: 'BLOCK_END'};
    }
  },
  placeDetailsViewSetup: ({defaultLayoutMode}) => {
    if (defaultLayoutMode === 'SHEET') {
      return {layoutMode: 'INFO_WINDOW'};
    }
  },
});

স্থান চয়নকারীকে লুকিয়ে রাখা হচ্ছে

স্থান চয়নকারী ডিফল্টরূপে দৃশ্যমান। স্থান চয়নকারীকে আড়াল করতে, layoutMode HIDDEN এ সেট করুন, যেমনটি নিম্নলিখিত উদাহরণে দেখানো হয়েছে:

placeChooserViewSetup: {layoutMode: 'HIDDEN'},

যখন ডিফল্ট অবস্থান BLOCK_END এ পরিবর্তিত হয় তখন নিম্নলিখিত উদাহরণটি স্থান চয়নকারীকে লুকিয়ে দেখায়:

const localContextMapView = new google.maps.localContext.LocalContextMapView({
  placeChooserViewSetup: ({defaultPosition}) => {
    if (defaultPosition === 'BLOCK_END') {
      return {layoutMode: 'HIDDEN'};
    }
  },
});

একটি তথ্য উইন্ডোতে স্থানের বিশদ বিবরণ প্রদর্শন করা হচ্ছে

একটি তথ্য উইন্ডোতে স্থানের বিশদ বিবরণ প্রদর্শন করতে, layoutMode INFO_WINDOW এ সেট করুন, যেমনটি নিম্নলিখিত উদাহরণে দেখানো হয়েছে:

placeDetailsViewSetup: {layoutMode: 'INFO_WINDOW'},

আপনি এই সেটিংটি যেকোনো স্থান চয়নকারী অবস্থানের সাথে (বাম, ডান বা নীচে) ব্যবহার করতে পারেন।

স্থানের বিবরণ লুকিয়ে প্রোগ্রামগতভাবে দেখুন

আপনি LocalContextMapView ইনস্ট্যান্সে hidePlaceDetailsView() কল করার মাধ্যমে প্রোগ্রাম্যাটিকভাবে স্থানের বিশদ দৃশ্যটি লুকাতে পারেন, যেমনটি নিম্নলিখিত উদাহরণে দেখানো হয়েছে:

localContextMapView.hidePlaceDetailsView()

ডিফল্টরূপে, মানচিত্রে ক্লিক করা স্থানের বিশদ দৃশ্য লুকিয়ে রাখবে। এই ডিফল্ট আচরণ প্রতিরোধ করতে আপনি placeDetailsViewSetup এ hidesOnMapClick বিকল্পটিকে false সেট করতে পারেন।

// Prevent hiding the place details view when the map is clicked.
const localContextMapView = new google.maps.localContext.LocalContextMapView({
  ...
  placeDetailsViewSetup: {hidesOnMapClick: false},
});

মানচিত্রে ক্লিক করার সময় শুধুমাত্র স্থানের বিবরণ তথ্য উইন্ডোটি লুকানোর জন্য, আপনি শর্তসাপেক্ষে নিম্নলিখিত উদাহরণে দেখানো হিসাবে hidesOnMapClick মান সেট করা নিয়ন্ত্রণ করতে পারেন:

// Only hides the place details Info Window when the map is clicked.
const localContextMapView = new google.maps.localContext.LocalContextMapView({
  ...
  placeDetailsViewSetup: ({defaultLayoutMode}) => {
    return {hidesOnMapClick: defaultLayoutMode === 'INFO_WINDOW'};
  },
});

অভ্যন্তরীণ Map বিকল্পগুলি সেট করা হচ্ছে

একবার আপনার কাছে একটি LocalContextMapView দৃষ্টান্ত থাকলে, আপনি অভ্যন্তরীণ Map উদাহরণে MapOptions সেট করতে পারেন। একটি LocalContextMapView দ্বারা থাকা Map মানচিত্র জাভাস্ক্রিপ্ট API মানচিত্রের মতো একই মানচিত্র বিকল্পগুলিকে সমর্থন করে৷ নিম্নলিখিত উদাহরণে একটি নতুন LocalContextMapView উদাহরণ তৈরি করা এবং ভিতরের Map কয়েকটি বিকল্প সেট করা দেখায়:

// Instantiate LocalContextMapView.
function initMap() {
  const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.querySelector('#map'),
    placeTypePreferences: ['restaurant'],
    maxPlaceCount: 12,
  });

  // Set inner map options.
  localContextMapView.map.setOptions({
    center: pos,
    zoom: 14,
    mapTypeId: 'satellite',
  });
}