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

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

अगले चरण

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