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

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

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

  • একটি মার্কারের জন্য সংঘর্ষের আচরণ সেট করুন
  • মার্কার উচ্চতা সেট করুন
  • ম্যাপের জুম লেভেলের মাধ্যমে মার্কার দৃশ্যমানতা নিয়ন্ত্রণ করুন

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

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

সংঘর্ষের আচরণ সেট করতে, 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 }),
  collisionBehavior: collisionBehavior,
});
mapElement.appendChild(advancedMarker);
index.ts

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

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

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

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

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

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

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

mapElement.append(marker);
index.ts

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

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

ম্যাপের জুম লেভেলের মাধ্যমে মার্কার দৃশ্যমানতা নিয়ন্ত্রণ করুন

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

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

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

mapElement.innerMap.addListener('zoom_changed', () => {
  let zoom = mapElement.innerMap.getZoom();
  for (let i = 0; i < markers.length; i++) {
    const { position, minZoom } = markerOptions[i];
    markers[i].position = zoom! > minZoom ? position : null;
  }
});
index.ts

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

mapElement.innerMap.addListener('zoom_changed', () => {
    let zoom = mapElement.innerMap.getZoom();
    for (let i = 0; i < markers.length; i++) {
        const { position, minZoom } = markerOptions[i];
        markers[i].position = zoom > minZoom ? position : null;
    }
});
index.js

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

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