সংঘর্ষের আচরণ, উচ্চতা এবং দৃশ্যমানতা নিয়ন্ত্রণ করুন

এই পৃষ্ঠাটি আপনাকে দেখায় কিভাবে উন্নত মার্কারগুলির নিম্নলিখিত দিকগুলি নিয়ন্ত্রণ করতে হয়:

• একটি চিহ্নিতকারীর জন্য সংঘর্ষের আচরণ সেট করুন
• মার্কার উচ্চতা সেট করুন
• মানচিত্র জুম স্তর দ্বারা মার্কার দৃশ্যমানতা নিয়ন্ত্রণ করুন

একটি চিহ্নিতকারীর জন্য সংঘর্ষের আচরণ সেট করুন

সংঘর্ষের আচরণ নিয়ন্ত্রণ করে কিভাবে একটি মার্কার প্রদর্শিত হবে যদি এটি অন্য মার্কারের সাথে সংঘর্ষে (ওভারল্যাপ) হয়। সংঘর্ষের আচরণ শুধুমাত্র ভেক্টর মানচিত্রে সমর্থিত।

সংঘর্ষের আচরণ সেট করতে, নিম্নলিখিতগুলির একটিতে AdvancedMarkerElement.collisionBehavior সেট করুন:

• REQUIRED : (ডিফল্ট) সংঘর্ষ নির্বিশেষে সর্বদা মার্কার প্রদর্শন করুন।
• OPTIONAL_AND_HIDES_LOWER_PRIORITY শুধুমাত্র মার্কারটি প্রদর্শন করুন যদি এটি অন্য মার্কারের সাথে ওভারল্যাপ না করে। যদি এই ধরনের দুটি মার্কার ওভারল্যাপ হয়, তাহলে উচ্চতর zIndex সহ একটি দেখানো হয়। তাদের একই zIndex থাকলে, নিচের উল্লম্ব স্ক্রিনের অবস্থান দেখানো হয়।
• REQUIRED_AND_HIDES_OPTIONAL সংঘর্ষ নির্বিশেষে সর্বদা মার্কার প্রদর্শন করুন, এবং যে কোনো OPTIONAL_AND_HIDES_LOWER_PRIORITY মার্কার বা লেবেল লুকান যা মার্কারটির সাথে ওভারল্যাপ হবে৷

নিম্নলিখিত উদাহরণটি একটি চিহ্নিতকারীর জন্য সংঘর্ষের আচরণ সেটিং দেখায়:

const advancedMarker = new AdvancedMarkerElement({
  position: new google.maps.LatLng({ lat, lng }),
  map,
  collisionBehavior: collisionBehavior,
});
index.ts

const advancedMarker = new AdvancedMarkerElement({
  position: new google.maps.LatLng({ lat, lng }),
  map,
  collisionBehavior: collisionBehavior,
});
index.js

মার্কার উচ্চতা সেট করুন

ভেক্টর মানচিত্রে, আপনি একটি মার্কার প্রদর্শিত উচ্চতা সেট করতে পারেন। 3D মানচিত্র বিষয়বস্তু সম্পর্কিত মার্কার সঠিকভাবে প্রদর্শিত করার জন্য এটি দরকারী। একটি মার্কার জন্য উচ্চতা সেট করতে, MarkerView.position বিকল্পের মান হিসাবে একটি LatLngAltitude নির্দিষ্ট করুন:

const pin = new PinElement({
    background: '#4b2e83',
    borderColor: '#b7a57a',
    glyphColor: '#b7a57a',
    scale: 2.0,
});

const markerView = new AdvancedMarkerElement({
    map,
    content: pin.element,
    // Set altitude to 20 meters above the ground.
    position: { lat: 47.65170843460547, lng: -122.30754, altitude: 20 } as google.maps.LatLngAltitudeLiteral,
});
index.ts

const pin = new PinElement({
  background: "#4b2e83",
  borderColor: "#b7a57a",
  glyphColor: "#b7a57a",
  scale: 2.0,
});
const markerView = new AdvancedMarkerElement({
  map,
  content: pin.element,
  // Set altitude to 20 meters above the ground.
  position: { lat: 47.65170843460547, lng: -122.30754, altitude: 20 },
});
index.js

মানচিত্র জুম স্তর দ্বারা মার্কার দৃশ্যমানতা নিয়ন্ত্রণ করুন

মার্কারগুলির দৃশ্যমানতার পরিবর্তন দেখুন (জুম আউট করে শুরু করুন):

একটি উন্নত মার্কারের দৃশ্যমানতা নিয়ন্ত্রণ করতে, একটি zoom_changed শ্রোতা তৈরি করুন, এবং জুম নির্দিষ্ট মাত্রা অতিক্রম করলে AdvancedMarkerElement.map সেট করার জন্য একটি শর্তসাপেক্ষ ফাংশন যোগ করুন, যেমনটি নিম্নলিখিত উদাহরণে দেখানো হয়েছে null

map.addListener('zoom_changed', () => {
    const zoom = map.getZoom();
    if (zoom) {
        // Only show each marker above a certain zoom level.
        marker01.map = zoom > 14 ? map : null;
        marker02.map = zoom > 15 ? map : null;
        marker03.map = zoom > 16 ? map : null;
        marker04.map = zoom > 17 ? map : null;
    }
});
index.ts

map.addListener("zoom_changed", () => {
  const zoom = map.getZoom();

  if (zoom) {
    // Only show each marker above a certain zoom level.
    marker01.map = zoom > 14 ? map : null;
    marker02.map = zoom > 15 ? map : null;
    marker03.map = zoom > 16 ? map : null;
    marker04.map = zoom > 17 ? map : null;
  }
});
index.js

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

মার্কারগুলিকে ক্লিকযোগ্য এবং অ্যাক্সেসযোগ্য করুন

এই পৃষ্ঠাটি আপনাকে দেখায় কিভাবে উন্নত মার্কারগুলির নিম্নলিখিত দিকগুলি নিয়ন্ত্রণ করতে হয়:

• একটি চিহ্নিতকারীর জন্য সংঘর্ষের আচরণ সেট করুন
• মার্কার উচ্চতা সেট করুন
• মানচিত্র জুম স্তর দ্বারা মার্কার দৃশ্যমানতা নিয়ন্ত্রণ করুন

একটি চিহ্নিতকারীর জন্য সংঘর্ষের আচরণ সেট করুন

সংঘর্ষের আচরণ নিয়ন্ত্রণ করে কিভাবে একটি মার্কার প্রদর্শিত হবে যদি এটি অন্য মার্কারের সাথে সংঘর্ষে (ওভারল্যাপ) হয়। সংঘর্ষের আচরণ শুধুমাত্র ভেক্টর মানচিত্রে সমর্থিত।

সংঘর্ষের আচরণ সেট করতে, নিম্নলিখিতগুলির একটিতে AdvancedMarkerElement.collisionBehavior সেট করুন:

• REQUIRED : (ডিফল্ট) সংঘর্ষ নির্বিশেষে সর্বদা মার্কার প্রদর্শন করুন।
• OPTIONAL_AND_HIDES_LOWER_PRIORITY শুধুমাত্র মার্কারটি প্রদর্শন করুন যদি এটি অন্য মার্কারের সাথে ওভারল্যাপ না করে। যদি এই ধরনের দুটি মার্কার ওভারল্যাপ হয়, তাহলে উচ্চতর zIndex সহ একটি দেখানো হয়। তাদের একই zIndex থাকলে, নিচের উল্লম্ব স্ক্রিনের অবস্থান দেখানো হয়।
• REQUIRED_AND_HIDES_OPTIONAL সংঘর্ষ নির্বিশেষে সর্বদা মার্কার প্রদর্শন করুন, এবং যে কোনো OPTIONAL_AND_HIDES_LOWER_PRIORITY মার্কার বা লেবেল লুকান যা মার্কারটির সাথে ওভারল্যাপ হবে৷

নিম্নলিখিত উদাহরণটি একটি চিহ্নিতকারীর জন্য সংঘর্ষের আচরণ সেটিং দেখায়:

const advancedMarker = new AdvancedMarkerElement({
  position: new google.maps.LatLng({ lat, lng }),
  map,
  collisionBehavior: collisionBehavior,
});
index.ts

const advancedMarker = new AdvancedMarkerElement({
  position: new google.maps.LatLng({ lat, lng }),
  map,
  collisionBehavior: collisionBehavior,
});
index.js

মার্কার উচ্চতা সেট করুন

ভেক্টর মানচিত্রে, আপনি একটি মার্কার প্রদর্শিত উচ্চতা সেট করতে পারেন। 3D মানচিত্র বিষয়বস্তু সম্পর্কিত মার্কার সঠিকভাবে প্রদর্শিত করার জন্য এটি দরকারী। একটি মার্কার জন্য উচ্চতা সেট করতে, MarkerView.position বিকল্পের মান হিসাবে একটি LatLngAltitude নির্দিষ্ট করুন:

const pin = new PinElement({
    background: '#4b2e83',
    borderColor: '#b7a57a',
    glyphColor: '#b7a57a',
    scale: 2.0,
});

const markerView = new AdvancedMarkerElement({
    map,
    content: pin.element,
    // Set altitude to 20 meters above the ground.
    position: { lat: 47.65170843460547, lng: -122.30754, altitude: 20 } as google.maps.LatLngAltitudeLiteral,
});
index.ts

const pin = new PinElement({
  background: "#4b2e83",
  borderColor: "#b7a57a",
  glyphColor: "#b7a57a",
  scale: 2.0,
});
const markerView = new AdvancedMarkerElement({
  map,
  content: pin.element,
  // Set altitude to 20 meters above the ground.
  position: { lat: 47.65170843460547, lng: -122.30754, altitude: 20 },
});
index.js

মানচিত্র জুম স্তর দ্বারা মার্কার দৃশ্যমানতা নিয়ন্ত্রণ করুন

মার্কারগুলির দৃশ্যমানতার পরিবর্তন দেখুন (জুম আউট করে শুরু করুন):

একটি উন্নত মার্কারের দৃশ্যমানতা নিয়ন্ত্রণ করতে, একটি zoom_changed শ্রোতা তৈরি করুন, এবং জুম নির্দিষ্ট মাত্রা অতিক্রম করলে AdvancedMarkerElement.map সেট করার জন্য একটি শর্তসাপেক্ষ ফাংশন যোগ করুন, যেমনটি নিম্নলিখিত উদাহরণে দেখানো হয়েছে null

map.addListener('zoom_changed', () => {
    const zoom = map.getZoom();
    if (zoom) {
        // Only show each marker above a certain zoom level.
        marker01.map = zoom > 14 ? map : null;
        marker02.map = zoom > 15 ? map : null;
        marker03.map = zoom > 16 ? map : null;
        marker04.map = zoom > 17 ? map : null;
    }
});
index.ts

map.addListener("zoom_changed", () => {
  const zoom = map.getZoom();

  if (zoom) {
    // Only show each marker above a certain zoom level.
    marker01.map = zoom > 14 ? map : null;
    marker02.map = zoom > 15 ? map : null;
    marker03.map = zoom > 16 ? map : null;
    marker04.map = zoom > 17 ? map : null;
  }
});
index.js

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

মার্কারগুলিকে ক্লিকযোগ্য এবং অ্যাক্সেসযোগ্য করুন