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

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

উন্নত মার্কারগুলি মার্কারগুলিকে সংজ্ঞায়িত করার জন্য দুটি শ্রেণী ব্যবহার করে: AdvancedMarkerElement ক্লাস মৌলিক পরামিতি প্রদান করে ( position , title , এবং map ), এবং PinElement ক্লাসে আরও কাস্টমাইজেশনের বিকল্প রয়েছে৷ নিম্নলিখিত স্নিপেট একটি নতুন PinElement তৈরি করতে কোড দেখায়, তারপর এটি একটি মার্কারে প্রয়োগ করুন।

// Create a pin element.
const pin = new PinElement({
    scale: 1.5,
});
// Create a marker and apply the element.
const marker = new AdvancedMarkerElement({
    map,
    position: { lat: 37.419, lng: -122.02 },
    content: pin.element,
});

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

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

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

  marker.appendChild(pin.element);
}

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

একটি অ্যাডভান্স মার্কারের অংশগুলি দেখানো একটি চিত্র৷
চিত্র 1 : একটি উন্নত মার্কার অংশ।

শিরোনাম টেক্সট যোগ করুন

কার্সার একটি মার্কারের উপর ঘোরার সময় শিরোনাম পাঠ্য উপস্থিত হয়। শিরোনাম পাঠ্য স্ক্রিন পাঠকদের দ্বারা পাঠযোগ্য।

শিরোনাম পাঠ্য প্রোগ্রামে যোগ করতে, AdvancedMarkerElement.title বিকল্পটি ব্যবহার করুন:


  
  
  
  
  
  

  

     
TypeScript

      
// Default marker with title text (no PinElement).
const markerViewWithText = new AdvancedMarkerElement({
    map,
    position: { lat: 37.419, lng: -122.03 },
    title: 'Title text for the marker at lat: 37.419, lng: -122.03',
});
index.ts
 জাভাস্ক্রিপ্ট
 
// Default marker with title text (no PinElement).
const markerViewWithText = new AdvancedMarkerElement({
  map,
  position: { lat: 37.419, lng: -122.03 },
  title: "Title text for the marker at lat: 37.419, lng: -122.03",
});
index.js

HTML ব্যবহার করে তৈরি একটি মার্কারে শিরোনাম পাঠ্য যোগ করতে, title বৈশিষ্ট্য ব্যবহার করুন:


  
  
  
  
<gmp-map
  center="43.4142989,-124.2301242"
  zoom="4"
  map-id="DEMO_MAP_ID"
  style="height: 400px"
>
  <gmp-advanced-marker
    position="37.4220656,-122.0840897"
    title="Mountain View, CA"
  ></gmp-advanced-marker>
  <gmp-advanced-marker
    position="47.648994,-122.3503845"
    title="Seattle, WA"
  ></gmp-advanced-marker>
</gmp-map>
index.html

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

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

টাইপস্ক্রিপ্ট

// Adjust the scale.
const pinScaled = new PinElement({
    scale: 1.5,
});
const markerViewScaled = new AdvancedMarkerElement({
    map,
    position: { lat: 37.419, lng: -122.02 },
    content: pinScaled.element,
});
index.ts

জাভাস্ক্রিপ্ট

// Adjust the scale.
const pinScaled = new PinElement({
  scale: 1.5,
});
const markerViewScaled = new AdvancedMarkerElement({
  map,
  position: { lat: 37.419, lng: -122.02 },
  content: pinScaled.element,
});
index.js

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

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

টাইপস্ক্রিপ্ট

// Change the background color.
const pinBackground = new PinElement({
    background: '#FBBC04',
});
const markerViewBackground = new AdvancedMarkerElement({
    map,
    position: { lat: 37.419, lng: -122.01 },
    content: pinBackground.element,
});
index.ts

জাভাস্ক্রিপ্ট

// Change the background color.
const pinBackground = new PinElement({
  background: "#FBBC04",
});
const markerViewBackground = new AdvancedMarkerElement({
  map,
  position: { lat: 37.419, lng: -122.01 },
  content: pinBackground.element,
});
index.js

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

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

টাইপস্ক্রিপ্ট

// Change the border color.
const pinBorder = new PinElement({
    borderColor: '#137333',
});
const markerViewBorder = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.03 },
    content: pinBorder.element,
});
index.ts

জাভাস্ক্রিপ্ট

// Change the border color.
const pinBorder = new PinElement({
  borderColor: "#137333",
});
const markerViewBorder = new AdvancedMarkerElement({
  map,
  position: { lat: 37.415, lng: -122.03 },
  content: pinBorder.element,
});
index.js

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

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

টাইপস্ক্রিপ্ট

// Change the glyph color.
const pinGlyph = new PinElement({
    glyphColor: 'white',
});
const markerViewGlyph = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.02 },
    content: pinGlyph.element,
});
index.ts

জাভাস্ক্রিপ্ট

// Change the glyph color.
const pinGlyph = new PinElement({
  glyphColor: "white",
});
const markerViewGlyph = new AdvancedMarkerElement({
  map,
  position: { lat: 37.415, lng: -122.02 },
  content: pinGlyph.element,
});
index.js

গ্লিফ লুকান

চিহ্নিতকারীর গ্লাইফ লুকানোর জন্য PinElement.glyph বিকল্পটিকে একটি খালি স্ট্রিং-এ সেট করুন:

টাইপস্ক্রিপ্ট

// Hide the glyph.
const pinNoGlyph = new PinElement({
    glyph: '',
});
const markerViewNoGlyph = new AdvancedMarkerElement({
    map,
    position: { lat: 37.415, lng: -122.01 },
    content: pinNoGlyph.element,
});
index.ts

জাভাস্ক্রিপ্ট

// Hide the glyph.
const pinNoGlyph = new PinElement({
  glyph: "",
});
const markerViewNoGlyph = new AdvancedMarkerElement({
  map,
  position: { lat: 37.415, lng: -122.01 },
  content: pinNoGlyph.element,
});
index.js

বিকল্পভাবে, PinElement.glyphColor PinElement.background এর মতো একই মান সেট করুন। এটি দৃশ্যত গ্লিফ লুকানোর প্রভাব আছে.

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