इस पेज पर, ऐडवांस मार्कर के इन पहलुओं को कंट्रोल करने का तरीका बताया गया है:
- किसी मार्कर के लिए कोलिशन का तरीका सेट करना
- मार्कर की ऊंचाई सेट करना
- मैप के ज़ूम लेवल के हिसाब से मार्कर की विज़िबिलिटी कंट्रोल करना
किसी मार्कर के लिए कोलिशन का तरीका सेट करना
कोलिज़न बिहेवियर से यह कंट्रोल किया जाता है कि अगर कोई मार्कर किसी दूसरे मार्कर से टकराता है (ओवरलैप होता है), तो वह कैसे दिखेगा. कोलिज़न बिहेवियर की सुविधा सिर्फ़ वेक्टर मैप पर काम करती है.
टकराव के व्यवहार को सेट करने के लिए, 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 }), map, collisionBehavior: collisionBehavior, });
JavaScript
const advancedMarker = new AdvancedMarkerElement({ position: new google.maps.LatLng({ lat, lng }), map, collisionBehavior: collisionBehavior, });
मार्कर की ऊंचाई सेट करना
वेक्टर मैप पर, मार्कर दिखने की ऊंचाई सेट की जा सकती है. यह 3D मैप कॉन्टेंट के हिसाब से मार्कर को सही तरीके से दिखाने के लिए फ़ायदेमंद है. किसी मार्कर के लिए ऊंचाई सेट करने के लिए, LatLngAltitude
विकल्प की वैल्यू के तौर पर LatLngAltitude
तय करें:MarkerView.position
TypeScript
const pin = new PinElement({ background: '#4b2e83', borderColor: '#b7a57a', glyphColor: '#b7a57a', scale: 2.0, }); const markerView = new AdvancedMarkerElement({ map, content: pin.element, // Set altitude to 20 meters above the ground. position: { lat: 47.65170843460547, lng: -122.30754, altitude: 20 } as google.maps.LatLngAltitudeLiteral, });
JavaScript
const pin = new PinElement({ background: '#4b2e83', borderColor: '#b7a57a', glyphColor: '#b7a57a', scale: 2.0, }); const markerView = new AdvancedMarkerElement({ map, content: pin.element, // Set altitude to 20 meters above the ground. position: { lat: 47.65170843460547, lng: -122.30754, altitude: 20 }, });
मैप के ज़ूम लेवल के हिसाब से मार्कर की विज़िबिलिटी कंट्रोल करना
मार्कर दिखने की सेटिंग में बदलाव देखें (ज़ूम आउट करके शुरू करें):
ऐडवांस मार्कर के दिखने की स्थिति को कंट्रोल करने के लिए, zoom_changed
लिसनर बनाएं. इसके बाद, एक शर्त वाला फ़ंक्शन जोड़ें. इससे ज़ूम का लेवल तय किए गए लेवल से ज़्यादा होने पर, AdvancedMarkerElement.map
को null
पर सेट किया जा सकेगा. यहां दिए गए उदाहरण में, इसे दिखाया गया है:
TypeScript
map.addListener('zoom_changed', () => { const zoom = map.getZoom(); if (zoom) { // Only show each marker above a certain zoom level. marker01.map = zoom > 14 ? map : null; marker02.map = zoom > 15 ? map : null; marker03.map = zoom > 16 ? map : null; marker04.map = zoom > 17 ? map : null; } });
JavaScript
map.addListener("zoom_changed", () => { const zoom = map.getZoom(); if (zoom) { // Only show each marker above a certain zoom level. marker01.map = zoom > 14 ? map : null; marker02.map = zoom > 15 ? map : null; marker03.map = zoom > 16 ? map : null; marker04.map = zoom > 17 ? map : null; } });
अगले चरण
मार्कर को क्लिक करने लायक और ऐक्सेस करने लायक बनाना