3D मैप के कंट्रोल और एक्सप्लोरेशन

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

कंट्रोल के बारे में खास जानकारी

Maps JavaScript API में 3D Maps की मदद से दिखाए गए मैप में यूज़र इंटरफ़ेस (यूआई) एलिमेंट होते हैं. इन्हें एक्सप्लोरेशन कंट्रोल कहा जाता है. इनकी मदद से, उपयोगकर्ता मैप के साथ इंटरैक्ट कर सकते हैं. एक्सप्लोरेशन कंट्रोल, मैप के यूज़र इंटरफ़ेस (यूआई) में डिफ़ॉल्ट रूप से दिखते हैं. हालांकि, इन्हें बंद किया जा सकता है, ताकि यूज़र इंटरफ़ेस (यूआई) को आसान बनाया जा सके या कस्टम कंट्रोल के लिए जगह छोड़ी जा सके. ध्यान दें कि यूज़र इंटरफ़ेस (यूआई) कंट्रोल बंद होने पर, मैप एक्सप्लोर करने के लिए कीबोर्ड शॉर्टकट उपलब्ध होते हैं.

Maps JavaScript API में मौजूद 3D मैप की मदद से, उपयोगकर्ताओं को मैप पर पहले से सेट किए गए कैमरा पाथ का इस्तेमाल करके भी गाइड किया जा सकता है. इन पाथ को पसंद के मुताबिक बनाया जा सकता है. साथ ही, इन्हें मिलाकर 3D में बेहतर अनुभव दिया जा सकता है.

एक्सप्लोरेशन कंट्रोल

नीचे दी गई इमेज में, Maps JavaScript API में 3D मैप की ओर से दिखाए गए कंट्रोल का डिफ़ॉल्ट सेट दिखाया गया है:

मैप की इमेज, जिसमें कंट्रोल मौजूद हैं

Maps JavaScript में 3D मैप के लिए उपलब्ध कंट्रोल की पूरी सूची यहां दी गई है:

  • ज़ूम कंट्रोल में, मैप के ज़ूम लेवल को बदलने के लिए "+" और "-" बटन दिखते हैं.
  • जगह बदलने वाले कंट्रोल में, मैप के सेंटर को बदलने के लिए "←", "→", "↑", और "↓" बटन दिखते हैं.
  • घुमाने के कंट्रोल की मदद से, कैमरे की हेडिंग बदली जा सकती है.
  • झुकाव कंट्रोल की मदद से, कैमरे के झुकाव में बदलाव किया जा सकता है.
  • कंपास कंट्रोल से, कंपास की उत्तर दिशा का पता चलता है. साथ ही, इससे कैमरे को उत्तर दिशा की ओर रीसेट किया जा सकता है.

यहां दिए गए कोड सैंपल में, एक्सप्लोरेशन कंट्रोल को टॉगल करने का तरीका बताया गया है:

JavaScript

const map = new Map3DElement({
  center: { lat: 37.819852, lng: -122.478549, altitude: 2000 },
  tilt: 75,
  heading: 330,
  mode: MapMode.SATELLITE,
  defaultUIHidden: true,
});

एचटीएमएल

<gmp-map-3d
  mode="hybrid"
  range="639.274301042242"
  tilt="64.92100184857551"
  center="34.0768990953219,-118.47450491266041,292.9794737933403"
  heading="-61.02026752077781"
  default-ui-disabled
></gmp-map-3d>

अगले चरण