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

প্ল্যাটফর্ম বেছে নিন: 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;
    }
});

পরবর্তী ধাপ

মার্কার ক্লিক করা ও অ্যাক্সেস করার উপযুক্ত করে তোলা