मैप के साथ इंटरैक्ट करना

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

  • आसानी से इंटरैक्ट करने के लिए, यूज़र इंटरफ़ेस इवेंट मैनेज करना.
  • 3D स्पेस में नेविगेट करने के लिए, एक्सप्लोरेशन कंट्रोल शामिल हैं.
  • गाइडेड टूर के लिए, पहले से सेट किए गए कैमरे के पाथ का इस्तेमाल करना.
  • किसी खास हिस्से पर फ़ोकस बनाए रखने के लिए, कैमरे पर पाबंदियां लगाना.

यूज़र इंटरफ़ेस इवेंट

इस सेक्शन में, इंटरैक्टिव इवेंट और स्टेटस में बदलाव की सूचनाओं के बारे में बताया गया है. 3D मैप के साथ काम करते समय, इन इवेंट और सूचनाओं को प्रोग्राम के हिसाब से मैनेज किया जा सकता है. ब्राउज़र में JavaScript, इवेंट-ड्रिवन होता है. इसका मतलब है कि यह उपयोगकर्ता के इंटरैक्शन के जवाब में, ऐसे इवेंट जनरेट करता है जिन्हें आपका प्रोग्राम सुन सकता है और उसके हिसाब से कोड को लागू कर सकता है.

इवेंट दो मुख्य तरह के होते हैं:

  • उपयोगकर्ता इंटरैक्शन इवेंट (जैसे, माउस क्लिक), 3D मैप व्यूपोर्ट से आपके कोड में भेजे जाते हैं. इन इवेंट की मदद से, 3D मैप एनवायरमेंट में उपयोगकर्ता की सीधी कार्रवाइयों का जवाब दिया जा सकता है. सैंपल देखें.
  • स्टेटस में हुए बदलाव की सूचनाएं, property_changed नाम देने के सामान्य स्कीम का इस्तेमाल करके, 3D मैप के डेटा मॉडल और रेंडरिंग स्टेटस में हुए अपडेट दिखाती हैं.

हर 3D मैपिंग API ऑब्जेक्ट, नाम वाले इवेंट का एक सेट दिखाता है. आपका प्रोग्राम, इन इवेंट के लिए इवेंट लिसनर रजिस्टर कर सकता है और इनके होने पर, पहले से मौजूद addEventListener() फ़ंक्शन का इस्तेमाल करके लॉजिक लागू कर सकता है. यहां दिए गए उदाहरण में, उपयोगकर्ता के 3D मैप के साथ इंटरैक्ट करने पर ट्रिगर होने वाले सामान्य इवेंट दिखाए गए हैं.

नीचे दिए गए उदाहरण से पता चलता है कि जब कोई उपयोगकर्ता मैप से इंटरैक्ट करता है, तो कौनसे इवेंट ट्रिगर होते हैं:

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

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

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

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

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

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

कैमरे के कंट्रोल और ऐनिमेशन

कैमरे के प्रीसेट पाथ

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

Maps JavaScript में, ज़्यादा असली लगने वाले 3D मैप के लिए, कैमरे के इन पाथ का इस्तेमाल किया जा सकता है:

  • FlyCameraTo ऐनिमेशन, मैप के बीच से किसी तय जगह पर जाता है.
  • FlyCameraAround ऐनिमेशन, मैप पर किसी पॉइंट के चारों ओर उतनी बार घूमता है जितनी बार आपने तय किया है.

उपलब्ध दो रास्तों को जोड़कर, किसी लोकप्रिय जगह पर जाया जा सकता है. इसके बाद, उस जगह के आस-पास घूमकर, अपनी पसंद के मुताबिक रुका जा सकता है.

सैंपल आज़माएं

कैमरे से जुड़ी पाबंदियां

हो सकता है कि आप कैमरे के पैन, ज़्यादा से ज़्यादा ऊंचाई को कंट्रोल करना चाहें या किसी मैप में उपयोगकर्ता की गतिविधि पर पाबंदी लगाने के लिए, अक्षांश/देशांतर के बॉउंड बनाएं. ऐसा करने के लिए, कैमरे के इस्तेमाल पर पाबंदी लगाएं.

कैमरे से जुड़ी पाबंदियां कैसे काम करती हैं और उन्हें कैसे लागू किया जाता है, इसका उदाहरण देखने के लिए डेमो देखें.