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

प्लैटफ़ॉर्म चुनें: 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: new google.maps.LatLng({ lat, lng }),
    collisionBehavior: collisionBehavior,
});
mapElement.appendChild(advancedMarker);
index.ts

JavaScript

const advancedMarker = new AdvancedMarkerElement({
    position: new google.maps.LatLng({ lat, lng }),
    collisionBehavior: collisionBehavior,
});
mapElement.appendChild(advancedMarker);
index.js

मार्कर की ऊंचाई सेट करना

वेक्टर मैप पर, मार्कर की ऊंचाई सेट की जा सकती है. यह सुविधा, 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,
    } as google.maps.LatLngAltitudeLiteral,
});
marker.append(pin);

mapElement.append(marker);
index.ts

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);
index.js

मैप के ज़ूम लेवल के हिसाब से, मार्कर की दिखने की सेटिंग को कंट्रोल करना

मार्कर की दिखने की सेटिंग में होने वाला बदलाव देखें. इसके लिए, ज़ूम आउट करें:

अडवांस मार्कर की दिखने की सेटिंग को कंट्रोल करने के लिए, zoom_changed लिसनर बनाएं. इसके बाद, कोई शर्त वाली फ़ंक्शन जोड़ें, ताकि ज़ूम लेवल तय किए गए लेवल से ज़्यादा होने पर, AdvancedMarkerElement.map को null पर सेट किया जा सके. यहां दिया गया उदाहरण देखें:

TypeScript

mapElement.innerMap.addListener('zoom_changed', () => {
    let zoom = mapElement.innerMap.getZoom();
    for (let i = 0; i < markers.length; i++) {
        const { position, minZoom } = markerOptions[i];
        markers[i].position = zoom! > minZoom ? position : null;
    }
});
index.ts

JavaScript

mapElement.innerMap.addListener('zoom_changed', () => {
    let zoom = mapElement.innerMap.getZoom();
    for (let i = 0; i < markers.length; i++) {
        const { position, minZoom } = markerOptions[i];
        markers[i].position = zoom > minZoom ? position : null;
    }
});
index.js

अगले चरण

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