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