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

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

अगले चरण

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