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

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

अगले चरण

मार्कर को क्लिक करने और ऐक्सेस करने की सुविधा देना