कैमरे की पोज़िशन को कंट्रोल करना

Maps JavaScript API में 3D मैप में, cameraPosition विकल्प का इस्तेमाल करके कैमरे के फ़ोकस को मैनेज किया जाता है.

मुख्य व्यवहार:

  • center की मदद से: अक्षांश और देशांतर के निर्देशांक, मैप पर उस सटीक पॉइंट के बारे में बताते हैं जिस पर कैमरा फ़ोकस करता है.
  • cameraPosition के साथ: कैमरा, कंस्ट्रक्शन के दौरान दिए गए कोऑर्डिनेट पर रखा जाता है. इस वजह से, अक्सर किसी खास जगह पर व्यू को सेंटर करना मुश्किल हो जाता है.

यहां दिए गए उदाहरण में, center विकल्प का इस्तेमाल करके मैप को शुरू करने का तरीका बताया गया है. इससे यह पक्का किया जा सकता है कि मैप में कोई खास फ़ोकल पॉइंट शामिल हो. मार्कर, center में दिए गए सेंटर पॉइंट को दिखाता है:

<html>
    <head>
        <title>3D Camera Position</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
    </head>
    <body>
        <gmp-map-3d
            center="40.7860524,-73.9634983,0"
            range="1500"
            tilt="70"
            heading="-150"
            mode="satellite">
            <gmp-marker position="40.7860524,-73.9634983" altitude-mode="clamp-to-ground"></gmp-marker>
        </gmp-map-3d>

        <script
            async
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&v=weekly&libraries=maps3d"></script>
    </body>
</html>
index.html

पूरे उदाहरण का सोर्स कोड देखें

सीएसएस

gmp-map-3d {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
style.css

एचटीएमएल

<html>
    <head>
        <title>3D Camera Position</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
    </head>
    <body>
        <gmp-map-3d
            center="40.7860524,-73.9634983,0"
            range="1500"
            tilt="70"
            heading="-150"
            mode="satellite">
            <gmp-marker position="40.7860524,-73.9634983" altitude-mode="clamp-to-ground"></gmp-marker>
        </gmp-map-3d>

        <script
            async
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&v=weekly&libraries=maps3d"></script>
    </body>
</html>
index.html

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

फ़ील्ड ऑफ़ व्यू (कैमरे से दिख रहा व्यू) और रेंज

दो अलग-अलग पैरामीटर का इस्तेमाल करके, यह अडजस्ट किया जा सकता है कि व्यूपोर्ट में मैप का कितना हिस्सा दिखे: रेंज और फ़ील्ड ऑफ़ व्यू. इन दोनों से "ज़ूम" लेवल पर असर पड़ता है, लेकिन ये अलग-अलग तरीके से काम करते हैं:

  • range: इससे कैमरे और सेंटर पॉइंट के बीच की दूरी को कंट्रोल किया जाता है. इसे अडजस्ट करने का मतलब है कि कैमरे को मैप के पास या उससे दूर ले जाना.

  • fov (फ़ील्ड ऑफ़ व्यू): इससे कैमरे के लेंस के ऐंगल को कंट्रोल किया जाता है. ज़्यादा वैल्यू, वाइड-ऐंगल लेंस की तरह काम करती है. इससे ज़्यादा एरिया दिखता है. वहीं, कम वैल्यू, टेलीफ़ोटो लेंस की तरह काम करती है.

यहां दी गई तुलना में, एक ही मैप को fov स्पेक्ट्रम के दोनों छोरों पर दिखाया गया है. बाईं ओर मौजूद मैप में, फ़ील्ड ऑफ़ व्यू (एफ़ओवी) को 5 (नैरो/टेलीफ़ोटो) पर सेट किया गया है. वहीं, दाईं ओर मौजूद मैप में, इसे 80 (वाइड-ऐंगल) पर सेट किया गया है.

गोल्डन गेट ब्रिज की दो 3D एरियल रेंडरिंग की अगल-बगल में तुलना. बाईं ओर, पूरे ब्रिज और मारिन हेडलैंड का ऊपर से लिया गया एक बड़ा व्यू दिखाया गया है. दाईं ओर, लाल रंग के सस्पेंशन टावर और ब्रिज डेक का क्लोज़-अप दिखाया गया है. यह क्लोज़-अप, नीचे की ओर झुके हुए ऐंगल से लिया गया है.