टकराव के व्यवहार, ऊंचाई, और विज़िबिलिटी को कंट्रोल करना

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

JavaScript

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);

JavaScript

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;
    }
});

JavaScript

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;
    }
});

अगले चरण

मार्कर को क्लिक करने लायक और सुलभ बनाना