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

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

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

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

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

कोलिज़न बिहेवियर यह कंट्रोल करता है कि कोई मार्कर टकराने पर कैसे दिखेगा (ओवरलैप) किसी अन्य मार्कर के साथ. टकराव का व्यवहार सिर्फ़ वेक्टर मैप पर काम करता है.

एक से ज़्यादा मार्कर कंट्रोल करने के लिए, 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,
});
index.ts

JavaScript

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

index.js

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

सदिश मैप पर, आप वह ऊंचाई सेट कर सकते हैं जिस पर मार्कर दिखाई देता है. यह है इससे मार्कर को 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,
});
index.ts

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

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

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

ऐडवांस मार्कर की दिखने की सुविधा को कंट्रोल करने के लिए, 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;
    }
});
index.ts

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

अगले चरण

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