इस पेज पर, ऐडवांस मार्कर के इन पहलुओं को कंट्रोल करने का तरीका बताया गया है:
- मार्कर के लिए टकराव का व्यवहार सेट करें
- मार्कर की ऊंचाई सेट करना
- मैप के ज़ूम लेवल के हिसाब से मार्कर की दिखने की सेटिंग कंट्रोल करना
मार्कर के लिए, टक्कर का व्यवहार सेट करना
'टकराव का व्यवहार' से यह कंट्रोल होता है कि अगर कोई मार्कर किसी दूसरे मार्कर से टकराता है (ओवरलैप होता है), तो वह कैसा दिखेगा. टकराव की सुविधा सिर्फ़ वेक्टर मैप पर काम करती है.
कॉलिज़न व्यवहार सेट करने के लिए, 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 }), map, collisionBehavior: collisionBehavior, });
JavaScript
const advancedMarker = new AdvancedMarkerElement({ position: new google.maps.LatLng({ lat, lng }), map, collisionBehavior: collisionBehavior, });
मार्कर की ऊंचाई सेट करना
वेक्टर मैप पर, मार्कर के दिखने की ऊंचाई सेट की जा सकती है. यह 3D मैप कॉन्टेंट के हिसाब से मार्कर को सही तरीके से दिखाने के लिए मददगार है. किसी मार्कर के लिए ऊंचाई सेट करने के लिए, MarkerView.position
विकल्प की वैल्यू के तौर पर LatLngAltitude
डालें:
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; } });