कंट्रोल के बारे में खास जानकारी
Maps JavaScript API में Photorealistic 3D Maps की मदद से दिखाए गए मैप में, यूज़र इंटरफ़ेस (यूआई) एलिमेंट होते हैं. इनकी मदद से, उपयोगकर्ता मैप के साथ इंटरैक्ट कर सकते हैं. इन एलिमेंट को कंट्रोल कहा जाता है. आपके पास इन्हें यूज़र इंटरफ़ेस (यूआई) में शामिल करने या न करने का विकल्प होता है. यूज़र इंटरफ़ेस (यूआई) कंट्रोल को छिपाने पर भी, उपयोगकर्ता कीबोर्ड शॉर्टकट का इस्तेमाल करके मैप पर नेविगेट कर सकता है.
Maps JavaScript API में मौजूद फ़ोटोरियलिस्टिक 3D मैप की सुविधा, पहले से सेट किए गए कैमरा पाथ का इस्तेमाल करके, उपयोगकर्ताओं को मैप के बारे में जानकारी देने में भी मदद करती है. इन पाथ को पसंद के मुताबिक बनाया जा सकता है और इन्हें मिलाकर, बेहतर 3D अनुभव बनाए जा सकते हैं.
एक्सप्लोरेशन कंट्रोल
इस इमेज में, Maps JavaScript API में Photorealistic 3D Maps की ओर से दिखाए गए कंट्रोल का डिफ़ॉल्ट सेट दिखाया गया है:
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,
defaultUIDisabled: 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>
कैमरे के पाथ के लिए प्रीसेट
Maps JavaScript में फ़ोटोरियलिस्टिक 3D मैप की सुविधा में, कैमरे के दो प्रीसेट पाथ उपलब्ध होते हैं. एनिमेशन की अवधि बदलकर, कैमरा पाथ को पसंद के मुताबिक बनाया जा सकता है. इससे स्पीड बढ़ाई या कम की जा सकती है. इसके अलावा, कैमरा पाथ को मिलाकर ज़्यादा सिनेमैटिक अनुभव भी बनाए जा सकते हैं.
Maps JavaScript में फ़ोटोरियलिस्टिक 3D Maps की सुविधा, इन कैमरा पाथ के साथ काम करती है:
flyCameraToएनिमेशन, मैप के बीच से तय की गई मंज़िल तक जाता है.flyCameraAroundएनिमेशन, मैप पर किसी पॉइंट के चारों ओर तय की गई संख्या में घूमता है.
दिलचस्पी वाली जगह पर जाने, उसके चारों ओर घूमने, और फिर तय की गई जगह पर रुकने के लिए, उपलब्ध दोनों पाथ को एक साथ इस्तेमाल किया जा सकता है.
सीधे इस पर जाएं
यहां दिए गए कोड सैंपल में, कैमरे को किसी जगह पर ले जाने के लिए ऐनिमेशन बनाने का तरीका बताया गया है:
const map = document.querySelector('gmp-map-3d');
async function init() {
await google.maps.importLibrary('maps3d');
map.flyCameraTo({
endCamera: {
center: { lat: 37.6191, lng: -122.3816 },
tilt: 67.5,
range: 1000
},
durationMillis: 5000
});
}
फ़्लाइ अराउंड
यहां दिए गए कोड के उदाहरण में, किसी जगह के चारों ओर कैमरे को घुमाने का तरीका बताया गया है:
const map = document.querySelector('gmp-map-3d');
async function init() {
await google.maps.importLibrary('maps3d');
map.flyCameraAround({
camera,
durationMillis: 60000,
rounds: 1
});
}
ऐनिमेशन जोड़ना
यहां दिए गए कोड के सैंपल में, ऐनिमेशन को एक साथ इस्तेमाल करने का तरीका दिखाया गया है. इसमें, कैमरे को किसी जगह पर ले जाने और फिर पहले ऐनिमेशन के खत्म होने पर, कैमरे को उस जगह के चारों ओर घुमाने का तरीका बताया गया है:
const map = document.querySelector('gmp-map-3d');
async function init() {
await google.maps.importLibrary('maps3d');
map.flyCameraTo({
endCamera: flyToCamera,
durationMillis: 5000,
});
map.addEventListener('gmp-animation-end', () => {
map.flyCameraAround({
camera: flyToCamera,
durationMillis: 60000,
rounds: 1
});
}, {once: true});
}
अगले चरण
- मैप और कैमरे के ऐक्सेस को सीमित करने का तरीका जानें.
- उपयोगकर्ता के इंटरैक्शन को सुनने और उसे मैनेज करने का तरीका जानें.