एक से ज़्यादा मार्कर कंट्रोल करने से जुड़ी सेटिंग

इस पेज पर, मार्कर के लिए टकराव की स्थिति को सेट करने का तरीका बताया गया है. कोलिज़न बिहेवियर से यह कंट्रोल किया जाता है कि अगर कोई मार्कर किसी दूसरे मार्कर से टकराता है (ओवरलैप होता है), तो वह कैसे दिखेगा.

टकराव की स्थिति को सेट करने के लिए, collisionBehavior को इनमें से किसी एक पर सेट करें:

• REQUIRED: टकराव होने पर भी मार्कर हमेशा दिखाएं
• REQUIRED_AND_HIDES_OPTIONAL: मार्कर हमेशा दिखेगा, भले ही वह किसी अन्य मार्कर या लेबल से टकरा रहा हो. साथ ही, मार्कर के साथ ओवरलैप होने वाले सभी OPTIONAL_AND_HIDES_LOWER_PRIORITY मार्कर या लेबल छिप जाएंगे.
• OPTIONAL_AND_HIDES_LOWER_PRIORITY: मार्कर को सिर्फ़ तब दिखाएं, जब वह दूसरे मार्कर के साथ ओवरलैप न हो रहा हो. अगर इस तरह के दो मार्कर ओवरलैप होते हैं, तो ज़्यादा zIndex वाला मार्कर दिखाया जाता है. अगर दोनों में एक ही zIndex है, तो वर्टिकल स्क्रीन पर नीचे की ओर मौजूद को दिखाया जाता है.

नीचे दिए गए उदाहरण में, मार्कर के लिए टकराव की स्थिति को सेट करने का तरीका दिखाया गया है:

const marker = new Marker3DElement({
    position: { lat, lng },
    // Try setting a different collision behavior here.
    collisionBehavior: 'REQUIRED',
});
index.js

किसी लेबल के कोलिशन के तरीके को कंट्रोल करना

मार्कर के पिन और लेबल टेक्स्ट के एक-दूसरे से टकराने के व्यवहार को अलग-अलग कंट्रोल किया जा सकता है. कुछ मामलों में, कॉन्टेक्स्ट को बनाए रखने के लिए, स्क्रीन पर मार्कर पिन को दिखने दिया जा सकता है. वहीं, लेबल को छिपाया जा सकता है. इसके लिए, <gmp-marker-3d> के सिबलिंग के तौर पर <gmp-label-3d> एलिमेंट जोड़ें. साथ ही, for एट्रिब्यूट का इस्तेमाल करके उन्हें लिंक करें.

यहां दिए गए कोड सैंपल में, मार्कर से अलग लेबल के लिए टकराव का व्यवहार सेट करने का तरीका दिखाया गया है:

const markerWithIndependentLabel = new Marker3DElement({
    position: { lat: 37.423, lng: -122.015 },
});
markerWithIndependentLabel.id = 'marker-1';
const label = new Label3DElement({
    collisionBehavior: CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY,
    for: 'marker-1',
});
label.append('Independent label example');
map.append(markerWithIndependentLabel);
map.append(label);
index.js