टकराव के व्यवहार, ऊंचाई, और विज़िबिलिटी को कंट्रोल करना

प्लैटफ़ॉर्म चुनें: Android iOS JavaScript

इस पेज पर, ऐडवांस मार्कर के इन पहलुओं को कंट्रोल करने का तरीका बताया गया है:

  • मार्कर के लिए, टक्कर का व्यवहार सेट करना
  • मार्कर की ऊंचाई सेट करना
  • मैप के ज़ूम लेवल के हिसाब से मार्कर की दिखने की सेटिंग कंट्रोल करना

मार्कर के लिए, टक्कर का व्यवहार सेट करना

'टकराव का व्यवहार' से यह कंट्रोल होता है कि अगर कोई मार्कर किसी दूसरे मार्कर से टकराता है (ओवरलैप होता है), तो वह कैसा दिखेगा. टकराव की सुविधा सिर्फ़ वेक्टर मैप पर काम करती है.

कॉलिज़न व्यवहार सेट करने के लिए, AdvancedMarkerElement.collisionBehavior को इनमें से किसी एक पर सेट करें:

  • REQUIRED: (डिफ़ॉल्ट) चाहे कोई भी तरह का कोलिज़न हो, मार्कर हमेशा दिखाएं.
  • OPTIONAL_AND_HIDES_LOWER_PRIORITY मार्कर को सिर्फ़ तब दिखाएं, जब वह दूसरे मार्कर के साथ ओवरलैप न हो. अगर इस तरह के दो मार्कर ओवरलैप होते हैं, तो zIndex की ज़्यादा वैल्यू वाला मार्कर दिखाया जाता है. अगर दोनों स्क्रीनशॉट का zIndex एक ही है, तो स्क्रीन पर सबसे नीचे मौजूद स्क्रीनशॉट दिखाया जाता है.
  • REQUIRED_AND_HIDES_OPTIONAL मार्कर को हमेशा दिखाएं, भले ही वह किसी दूसरे मार्कर से ओवरलैप हो. साथ ही, ऐसे सभी OPTIONAL_AND_HIDES_LOWER_PRIORITY मार्कर या लेबल छिपाएं जो मार्कर से ओवरलैप होते हैं.

यहां दिए गए उदाहरण में, मार्कर के लिए टक्कर का व्यवहार सेट करने का तरीका बताया गया है:

TypeScriptJavaScript
const advancedMarker = new AdvancedMarkerElement({
  position: new google.maps.LatLng({ lat, lng }),
  map,
  collisionBehavior: collisionBehavior,
});
index.ts
 
const advancedMarker = new AdvancedMarkerElement({
  position: new google.maps.LatLng({ lat, lng }),
  map,
  collisionBehavior: collisionBehavior,
});

index.js

मार्कर की ऊंचाई सेट करना

वेक्टर मैप पर, मार्कर के दिखने की ऊंचाई सेट की जा सकती है. यह 3D मैप कॉन्टेंट के हिसाब से मार्कर को सही तरीके से दिखाने के लिए मददगार है. किसी मार्कर के लिए ऊंचाई सेट करने के लिए, MarkerView.position विकल्प की वैल्यू के तौर पर LatLngAltitude डालें:

TypeScriptJavaScript
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,
});
index.ts
 
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 },
});
index.js

मैप के ज़ूम लेवल के हिसाब से मार्कर की दिखने की सेटिंग कंट्रोल करना

मार्कर की विज़िबिलिटी में बदलाव देखें. इसके लिए, पहले ज़ूम आउट करें:

ऐडवांस मार्कर की दिखने की सुविधा को कंट्रोल करने के लिए, zoom_changed लिसनर बनाएं. साथ ही, एक शर्त वाला फ़ंक्शन जोड़ें, ताकि ज़ूम तय किए गए लेवल से ज़्यादा होने पर, AdvancedMarkerElement.map को null पर सेट किया जा सके. उदाहरण के लिए:

TypeScriptJavaScript
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;
    }
});
index.ts
 
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;
  }
});
index.js

अगले चरण

मार्कर को क्लिक किया जा सकने लायक और ऐक्सेस किया जा सकने लायक बनाना