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

থ্রিডি ম্যাপের জন্য মার্কার এপিআই মার্কার নির্ধারণ করতে দুটি ক্লাস ব্যবহার করে: Marker3DElement ক্লাসটি মৌলিক প্যারামিটার ( position , label , এবং map ) প্রদান করে, এবং PinElement ক্লাসে আরও কাস্টমাইজেশনের জন্য অপশন থাকে।

ম্যাপে মার্কার যোগ করার জন্য, আপনাকে প্রথমে মার্কার লাইব্রেরি লোড করতে হবে, যা Marker3DElement এবং PinElement ক্লাসগুলো সরবরাহ করে।

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

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

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

// 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 markerWithScale = new Marker3DElement({
    position: { lat: 37.419, lng: -122.02 },
});
markerWithScale.append(pinScaled);

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

মার্কারের ব্যাকগ্রাউন্ড রঙ পরিবর্তন করতে PinElement.background অপশনটি ব্যবহার করুন: 

// Change the background color.
const pinBackground = new PinElement({
    background: '#FBBC04',
});

const markerWithBackground = new Marker3DElement({
    position: { lat: 37.419, lng: -122.01 },
});
markerWithBackground.append(pinBackground);

বর্ডারের রঙ পরিবর্তন করুন

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

// Change the border color.
const pinBorder = new PinElement({
    borderColor: '#FFFFFF',
});
const markerWithBorder = new Marker3DElement({
    position: { lat: 37.415, lng: -122.035 },
});
markerWithBorder.append(pinBorder);

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

মার্কারের গ্লিফ রঙ পরিবর্তন করতে PinElement.glyphColor অপশনটি ব্যবহার করুন: 

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

একটি গ্লিফে টেক্সট যোগ করুন

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

// Change many elements together and extrude marker.
const pinTextGlyph = new PinElement({
    background: '#F0F6FC',
    glyphText: 'E',
    glyphColor: 'red',
    borderColor: '#0000FF',
});
const markerWithGlyphText = new Marker3DElement({
    position: { lat: 37.415, lng: -122.015, altitude: 50 },
    extruded: true,
    altitudeMode: 'RELATIVE_TO_GROUND',
});
markerWithGlyphText.append(pinTextGlyph);

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

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

// Change a marker's altitude and add an extrusion.
const extrudedMarker = 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();

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