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

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

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

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

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

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

সংঘর্ষের আচরণ নির্ধারণ করতে, 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 লিসেনার তৈরি করুন এবং একটি কন্ডিশনাল ফাংশন যোগ করুন যা জুম নির্দিষ্ট স্তর অতিক্রম করলে 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

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

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