বেসিক মার্কার কাস্টমাইজেশন, বেসিক মার্কার কাস্টমাইজেশন

3D মার্কারগুলি মার্কারগুলিকে সংজ্ঞায়িত করতে দুটি শ্রেণী ব্যবহার করে: 3DMarkerElement শ্রেণী মৌলিক পরামিতি প্রদান করে ( position , label , এবং map ), এবং PinElement ক্লাসে আরও কাস্টমাইজেশনের বিকল্প রয়েছে৷

একটি মানচিত্রে মার্কার যোগ করার জন্য, আপনাকে প্রথমে মার্কার লাইব্রেরি লোড করতে হবে, যা 3DMarkerElement এবং PinElement ক্লাস প্রদান করে।

নিম্নলিখিত স্নিপেট একটি নতুন PinElement তৈরি করতে কোড দেখায়, তারপর এটি একটি মার্কারে প্রয়োগ করুন:

const pinScaled = new PinElement({
  scale: 1.5,
});

const markerWithLabel = new Marker3DElement({
  position: { lat: 37.419, lng: -122.03 },
  label: 'Simple label'
});

এইচটিএমএল ব্যবহার করে তৈরি করা মানচিত্রে, একটি মার্কারের জন্য মৌলিক পরামিতিগুলি gmp-marker-3d HTML উপাদান ব্যবহার করে ঘোষণা করা হয়; PinElement শ্রেণী ব্যবহার করে এমন কোনো কাস্টমাইজেশন অবশ্যই প্রোগ্রাম্যাটিকভাবে প্রয়োগ করতে হবে। এটি করার জন্য, আপনার কোডটি অবশ্যই HTML পৃষ্ঠা থেকে gmp-marker-3d উপাদানগুলি পুনরুদ্ধার করবে৷ নিম্নলিখিত স্নিপেটটি gmp-marker-3d উপাদানগুলির একটি সংগ্রহের জন্য অনুসন্ধানের কোড দেখায়, তারপরে জিএমপি-মার্কার-3ডি-তে ঘোষিত কাস্টমাইজেশন প্রয়োগ করতে ফলাফলের মাধ্যমে পুনরাবৃত্তি করুন।

// Return an array of markers.
const markers = [...document.querySelectorAll('gmp-marker-3d')];

// Loop through the markers
for (let i = 0; i < markers.length; i++) {
  const pin = new PinElement({
      scale: 2.0,
  });

  markers[i].appendChild(pin.element);
}

এই পৃষ্ঠাটি আপনাকে নিম্নলিখিত উপায়ে মার্কার কাস্টমাইজ করতে দেখায়:

মার্কার স্কেল করুন

একটি মার্কার স্কেল করতে, scale বিকল্পটি ব্যবহার করুন:

// Adjust the scale.
const pinScaled = new PinElement({
  scale: 1.5,
});
const markerScaled = new Marker3DElement({
  map,
  position: { lat: 37.419, lng: -122.02 },
});

markerScaled.appendChild(pinScaled);

পটভূমির রঙ পরিবর্তন করুন

একটি চিহ্নিতকারীর পটভূমির রঙ পরিবর্তন করতে PinElement.background বিকল্পটি ব্যবহার করুন:

// Change the background color.
const pinBackground = new PinElement({
  background: '#FBBC04',
});
const markerBackground = new Marker3DElement({
  map,
  position: { lat: 37.419, lng: -122.01 },
});

markerBackground.appendChild(pinBackground);

সীমানার রঙ পরিবর্তন করুন

একটি মার্কার বর্ডার রঙ পরিবর্তন করতে PinElement.borderColor বিকল্পটি ব্যবহার করুন:

// Change the border color.
const pinBorder = new PinElement({
  borderColor: "#137333",
});
const markerBorder = new Marker3DElement({
  map,
  position: { lat: 37.415, lng: -122.035 },
});

markerBorder.appendChild(pinBorder);

গ্লিফের রঙ পরিবর্তন করুন

একটি চিহ্নিতকারীর গ্লাইফ রঙ পরিবর্তন করতে PinElement.glyphColor বিকল্পটি ব্যবহার করুন:

// Change the glyph color.
const pinGlyph = new PinElement({
  glyphColor: "white",
});
const markerGlyph = new Marker3DElement({
  map,
  position: { lat: 37.415, lng: -122.025 },
});

markerGlyph.appendChild(pinGlyph);

একটি গ্লিফে পাঠ্য যোগ করুন

একটি পাঠ্য অক্ষর দিয়ে ডিফল্ট গ্লাইফ প্রতিস্থাপন করতে PinElement.glyph বিকল্পটি ব্যবহার করুন। PinElement স্কেল এর টেক্সট গ্লাইফ PinElement এবং এর ডিফল্ট রঙের সাথে PinElement এর ডিফল্ট glyphColor সাথে মেলে:

const pinTextGlyph = new PinElement({
  glyph: "T",
  glyphColor: "white",
});
const markerGlyphText = new Marker3DElement({
  map,
  position: { lat: 37.415, lng: -122.015 },
});

markerGlyphText.appendChild(pinTextGlyph);

উচ্চতা পরিবর্তন করুন

মার্কারের উচ্চতা পরিবর্তন করতে এবং স্থল এবং মার্কারের মধ্যে একটি এক্সট্রুড লাইন যোগ করতে Marker3DElement.altitudeMode এবং Marker3DElement.extruded এর সাথে মিলিত Marker3DElement.position.altitude বিকল্পটি ব্যবহার করুন:

const marker = new Marker3DElement({
  position: { lat: 37.4239163, lng: -122.0947209, altitude: 100 },
  altitudeMode: 'RELATIVE_TO_GROUND',
  extruded: true,
});

মার্কারগুলি সরান

মানচিত্র থেকে মার্কারগুলি সরাতে Marker3DElement.remove() ব্যবহার করুন:

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

পরবর্তী পদক্ষেপ