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

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

अगले चरण

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