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

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

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

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

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

एक्सप्लोरेशन से जुड़े कंट्रोल

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

कंट्रोल के साथ मैप की इमेज

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

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

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

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>

अगले चरण