वेक्टर मैप

Maps JavaScript API, मैप को दो अलग-अलग तरीकों से लागू करता है: रास्टर और वेक्टर. रास्टर मैप डिफ़ॉल्ट रूप से लोड होता है और मैप को पिक्सल-आधारित रास्टर इमेज टाइल के ग्रिड के रूप में लोड करता है, जो Google Maps Platform के सर्वर-साइड से जनरेट होते हैं, फिर उन्हें आपके वेब ऐप्लिकेशन पर दिखाया जाता है. वेक्टर मैप, वेक्टर-आधारित टाइल से बना होता है. यह वेब-जीएल का इस्तेमाल करके क्लाइंट-साइड पर लोड समय पर बनता है, जो ब्राउज़र को उपयोगकर्ता के डिवाइस पर 3D डिवाइस पर जीपीयू तक पहुंचने देता है.

वेक्टर मैप वही Google मैप है जिससे आपके उपयोगकर्ता परिचित हैं. डिफ़ॉल्ट रास्टर टाइल मैप पर इसके कई फ़ायदे हैं. इनमें से ज़्यादातर वेक्टर आधारित इमेज को बेहतर तरीके से पेश करते हैं. साथ ही, 3D बिल्डिंग को ज़ूम लेवल पर करीब से देखना. वेक्टर मैप कुछ नई सुविधाओं का भी इस्तेमाल करता है, जैसे कि WebGL ओवरले व्यू के साथ 3D कॉन्टेंट जोड़ने की सुविधा, प्रोग्राम के हिसाब से झुकाव और हेडिंग कंट्रोल, बेहतर कैमरा कंट्रोल, और बेहतर तरीके से ज़ूम करने के लिए आंशिक ज़ूम.

वेक्टर मैप के साथ शुरू करना

कैमरा कंट्रोल करें

एक बार में कैमरा प्रॉपर्टी के किसी भी कॉम्बिनेशन को अपडेट करने के लिए, map.moveCamera() फ़ंक्शन का इस्तेमाल करें. map.moveCamera() एक सिंगल पैरामीटर स्वीकार करता है, जिसमें अपडेट करने के लिए सभी कैमरा प्रॉपर्टी होती हैं. इस उदाहरण में, center, zoom, heading, और tilt को एक साथ सेट करने के लिए, map.moveCamera() को कॉल करने का तरीका बताया गया है:

map.moveCamera({
  center: new google.maps.LatLng(37.7893719, -122.3942),
  zoom: 16,
  heading: 320,
  tilt: 47.5
});

ऐनिमेशन वाले लूप से, map.moveCamera() पर कॉल करके कैमरे की प्रॉपर्टी ऐनिमेट करें, जैसा कि यहां दिखाया गया है:

const degreesPerSecond = 3;

function animateCamera(time) {
  // Update the heading, leave everything else as-is.
  map.moveCamera({
    heading: (time / 1000) * degreesPerSecond
  });

  requestAnimationFrame(animateCamera);
}

// Start the animation.
requestAnimationFrame(animateCamera);

फ़्रैक्शनल ज़ूम

वेक्टर मैप आंशिक ज़ूम की सुविधा देते हैं. इसकी मदद से, पूर्णांक के बजाय फ़्रैक्शनल वैल्यू का इस्तेमाल करके ज़ूम किया जा सकता है. हालांकि, रास्टर और वेक्टर मैप दोनों वेक्टर मैप के लिए डिफ़ॉल्ट रूप से ज़ूम इन और रास्टर मैप के लिए डिफ़ॉल्ट रूप से बंद होते हैं. फ़्रैक्शनल ज़ूम को चालू और बंद करने के लिए, isFractionalZoomEnabled मैप विकल्प का इस्तेमाल करें.

नीचे दिए गए उदाहरण में मैप को शुरू करते समय, आंशिक ज़ूम चालू करने की जानकारी दी गई है:

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  isFractionalZoomEnabled: true
});

यहां दिए गए तरीके से, isFractionalZoomEnabled के मैप विकल्प को सेट करके, आंशिक ज़ूम को भी चालू या बंद किया जा सकता है:

// Using map.set
map.set('isFractionalZoomEnabled', true);

// Using map.setOptions
map.setOptions({isFractionalZoomEnabled: true});

आपके पास यह पता लगाने का विकल्प है कि फ़्रैक्शनल ज़ूम चालू है या नहीं. हालांकि, अगर आपने true या false को साफ़ तौर पर isFractionalZoomEnabled पर सेट नहीं किया है, तो यह आपके लिए सबसे ज़्यादा काम का होगा. यह उदाहरण कोड जांच करता है कि आंशिक ज़ूम चालू है या नहीं:

map.addListener('isfractionalzoomenabled_changed', () => {
  const isFractionalZoomEnabled = map.get('isFractionalZoomEnabled');
  if (isFractionalZoomEnabled === false) {
    console.log('not using fractional zoom');
  } else if (isFractionalZoomEnabled === true) {
    console.log('using fractional zoom');
  } else {
    console.log('map not done initializing yet');
  }
});