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

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

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

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

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

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

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

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

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

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

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 मैप के लिए, कैमरे के इन पाथ का इस्तेमाल किया जा सकता है:

  • 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});
}

अगले चरण