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

प्लैटफ़ॉर्म चुनें: 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

अगले चरण

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