इस पेज पर आपको बेहतर मार्कर के इन पहलुओं को कंट्रोल करने का तरीका बताया गया है:
- मार्कर के लिए टकराव का व्यवहार सेट करना
- मार्कर की ऊंचाई सेट करें
- मैप के ज़ूम लेवल से, मार्कर के दिखने की सेटिंग को कंट्रोल करें
मार्कर के लिए टकराव का व्यवहार सेट करना
टक्कर के व्यवहार से यह तय होता है कि अगर कोई मार्कर, किसी अन्य मार्कर के साथ टकराने (ओवरलैप्स) हो, तो वह कैसे दिखेगा. टकराव का व्यवहार सिर्फ़ वेक्टर मैप पर काम करता है.
टकराव के व्यवहार को सेट करने के लिए, 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; } });