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

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

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

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

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

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

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

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

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

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

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

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>

अगले चरण