কলিশন বিহেভিওর, উচ্চতা ও দৃশ্যমানতা কন্ট্রোল করা

প্ল্যাটফর্ম বেছে নিন: Android iOS JavaScript

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

  • মার্কারের জন্য কলিশন বিহেভিওর সেট করা
  • মার্কারের উচ্চতা সেট করুন
  • ম্যাপ জুম লেভেল অনুযায়ী মার্কারের দৃশ্যমানতা নিয়ন্ত্রণ করুন

মার্কারের জন্য কলিশন বিহেভিওর সেট করা

কলিশন বিহেভিওর নিয়ন্ত্রণ করে যে কোনও মার্কার অন্য মার্কারের সাথে কলিশন (ওভারল্যাপ) করলে কীভাবে তা দেখানো হবে। কলিশন বিহেভিওর শুধুমাত্র ভেক্টর ম্যাপে কাজ করে।

কলিশন বিহেভিওর সেট করতে, AdvancedMarkerElement.collisionBehavior-কে নিম্নলিখিতগুলির মধ্যে একটি হিসেবে সেট করুন:

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

নিম্নলিখিত উদাহরণে কোনও মার্কারের জন্য কলিশন বিহেভিওর সেট করা দেখানো হয়েছে:

TypeScript

const advancedMarker = new AdvancedMarkerElement({
    position: { lat, lng },
    collisionBehavior,
});
mapElement.appendChild(advancedMarker);

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

const advancedMarker = new AdvancedMarkerElement({
    position: { lat, lng },
    collisionBehavior,
});
mapElement.appendChild(advancedMarker);

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

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

TypeScript

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);

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

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);

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

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

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

TypeScript

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

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

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

পরবর্তী ধাপ

মার্কার ক্লিকযোগ্য ও অ্যাক্সেসযোগ্য করুন