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

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

अगले चरण

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