ज़ूम और पैन को कंट्रोल करना

प्लैटफ़ॉर्म चुनें: Android iOS JavaScript

खास जानकारी

किसी वेब पेज पर मैप का इस्तेमाल करने के लिए, खास विकल्पों की ज़रूरत पड़ सकती है. इसकी मदद से, ज़ूम और पैन करने के लिए मैप के साथ उपयोगकर्ताओं का इंटरैक्शन किया जा सकता है. ये विकल्प, जैसे कि gestureHandling, minZoom, maxZoom, और restriction, MapOptions इंटरफ़ेस में तय होते हैं.

डिफ़ॉल्ट व्यवहार

यह मैप, मैप के उन इंटरैक्शन के डिफ़ॉल्ट व्यवहार को दिखाता है जो सिर्फ़ zoom और center विकल्पों को इंस्टैंशिएट किए गए मैप के साथ किए जाते हैं.

इस मैप का कोड नीचे है.

TypeScript

new google.maps.Map(document.getElementById("map")!, {
  zoom,
  center,
});
index.ts

JavaScript

new google.maps.Map(document.getElementById("map"), {
  zoom,
  center,
});
index.js

जेस्चर हैंडलिंग को कंट्रोल करना

जब कोई उपयोगकर्ता किसी ऐसे पेज को स्क्रोल करता है जिसमें मैप है, तो स्क्रोल करने वाली कार्रवाई मैप को अनजाने में ज़ूम कर सकता है. इस व्यवहार को gestureHandling के विकल्प का इस्तेमाल करें.

जेस्चर हैंडलिंग: cooperative

नीचे दिए गए मैप में, gestureHandling विकल्प सेट का इस्तेमाल किया गया है से cooperative तक, उपयोगकर्ता ज़ूम किए बिना पेज को सामान्य रूप से स्क्रोल कर सकते है या मैप को पैन करने में मदद मिलती है. ज़ूम कंट्रोल पर क्लिक करके, उपयोगकर्ता मैप को ज़ूम कर सकते हैं. वे टचस्क्रीन के लिए, मैप पर दो उंगलियों के इस्तेमाल से ज़ूम और पैन भी किया जा सकता है डिवाइस.

इस मैप का कोड नीचे है.

TypeScript

new google.maps.Map(document.getElementById("map")!, {
  zoom,
  center,
  gestureHandling: "cooperative",
});
index.ts

JavaScript

new google.maps.Map(document.getElementById("map"), {
  zoom,
  center,
  gestureHandling: "cooperative",
});
index.js

सैंपल देखें

जेस्चर हैंडलिंग: auto

पेज के ऊपर मौजूद मैप में gestureHandling विकल्प नहीं है gestureHandling के साथ पिछले मैप की तरह व्यवहार cooperative पर सेट किया गया, क्योंकि इस पेज पर मौजूद सभी मैप <iframe>. gestureHandling की डिफ़ॉल्ट वैल्यू auto इस आधार पर greedy और cooperative के बीच स्विच करता है कि मैप <iframe> में शामिल था.

मैप <iframe> में शामिल है व्यवहार
हां cooperative
नहीं greedy

जेस्चर हैंडलिंग: greedy

greedy पर सेट gestureHandling वाला मैप पढ़ें. यह मैप, हाथ के सभी जेस्चर और स्क्रोल इवेंट पर प्रतिक्रिया देता है cooperative.

जेस्चर हैंडलिंग: none

gestureHandling विकल्प को none पर जाएं.

पैन और ज़ूम की सुविधा बंद की जा रही है

मैप को पैन और ज़ूम करने की सुविधा को पूरी तरह से बंद करने के लिए, दो विकल्प, gestureHandling और zoomControl, शामिल होना ज़रूरी है.

TypeScript

new google.maps.Map(document.getElementById("map")!, {
  zoom,
  center,
  gestureHandling: "none",
  zoomControl: false,
});
index.ts

JavaScript

new google.maps.Map(document.getElementById("map"), {
  zoom,
  center,
  gestureHandling: "none",
  zoomControl: false,
});
index.js

नीचे दिया गया मैप इन विज्ञापनों को दिखाता है gestureHandling और ऊपर दिए गए कोड में zoomControl का इस्तेमाल कर सकते हैं.

मैप की सीमाओं और ज़ूम को सीमित करना

हाथ के जेस्चर और ज़ूम कंट्रोल की अनुमति देना हो सकता है, लेकिन मैप पर यह सीमित हो किसी विशेष सीमा या कम से कम और ज़्यादा से ज़्यादा ज़ूम की सुविधा इस्तेमाल करें. ऐसा करने के लिए पाबंदियां, minZoom सेट करें, और maxZoom के विकल्प देखें. यह कोड और मैप ये विकल्प दिखाएं.

TypeScript

new google.maps.Map(document.getElementById("map")!, {
  zoom,
  center,
  minZoom: zoom - 3,
  maxZoom: zoom + 3,
  restriction: {
    latLngBounds: {
      north: -10,
      south: -40,
      east: 160,
      west: 100,
    },
  },
});
index.ts

JavaScript

new google.maps.Map(document.getElementById("map"), {
  zoom,
  center,
  minZoom: zoom - 3,
  maxZoom: zoom + 3,
  restriction: {
    latLngBounds: {
      north: -10,
      south: -40,
      east: 160,
      west: 100,
    },
  },
});
index.js