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