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

प्लैटफ़ॉर्म चुनें: 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);