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

प्लैटफ़ॉर्म चुनें: Android iOS JavaScript

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

टकराव के व्यवहार को सेट करने के लिए, 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',
});

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

मार्कर के पिन और लेबल टेक्स्ट के टकराव को अलग-अलग कंट्रोल किया जा सकता है. कुछ मामलों में, कॉन्टेक्स्ट को बनाए रखने के लिए, स्क्रीन पर मार्कर पिन को दिखने दिया जा सकता है. वहीं, लेबल को छिपाया जा सकता है. इसके लिए, <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);