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

प्लैटफ़ॉर्म चुनें: Android iOS JavaScript

इस पेज पर, ऐडवांस मार्कर के इन पहलुओं को कंट्रोल करने का तरीका बताया गया है:

  • किसी मार्कर के लिए कोलिशन का तरीका सेट करना
  • मार्कर की ऊंचाई सेट करना
  • मैप के ज़ूम लेवल के हिसाब से मार्कर की विज़िबिलिटी कंट्रोल करना

किसी मार्कर के लिए कोलिशन का तरीका सेट करना

कोलिज़न बिहेवियर से यह कंट्रोल किया जाता है कि अगर कोई मार्कर किसी दूसरे मार्कर से टकराता है (ओवरलैप होता है), तो वह कैसे दिखेगा. कोलिज़न बिहेवियर की सुविधा सिर्फ़ वेक्टर मैप पर काम करती है.

टकराव के व्यवहार को सेट करने के लिए, AdvancedMarkerElement.collisionBehavior को इनमें से किसी एक पर सेट करें:

  • REQUIRED: (डिफ़ॉल्ट) मार्कर हमेशा दिखता है, भले ही वह किसी दूसरे मार्कर के साथ ओवरलैप हो रहा हो.
  • OPTIONAL_AND_HIDES_LOWER_PRIORITY मार्कर को सिर्फ़ तब दिखाएं, जब वह दूसरे मार्कर के साथ ओवरलैप न हो रहा हो. अगर इस तरह के दो मार्कर एक-दूसरे पर ओवरलैप होते हैं, तो ज़्यादा zIndex वाला मार्कर दिखाया जाता है. अगर दोनों में एक ही 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 मैप कॉन्टेंट के हिसाब से मार्कर को सही तरीके से दिखाने के लिए काम आता है. किसी मार्कर के लिए ऊंचाई सेट करने के लिए, LatLngAltitude विकल्प की वैल्यू के तौर पर LatLngAltitude तय करें:MarkerView.position

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

अगले चरण

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