کنترل زوم و پان

پلتفرم مورد نظر را انتخاب کنید: اندروید، iOS، جاوا اسکریپت

نمای کلی

استفاده از نقشه در یک صفحه وب ممکن است نیاز به گزینه‌های خاصی برای کنترل نحوه تعامل کاربران با نقشه برای بزرگنمایی و حرکت داشته باشد. این گزینه‌ها، مانند gestureHandling ، minZoom ، maxZoom و restriction ، در رابط MapOptions تعریف شده‌اند.

رفتار پیش‌فرض

نقشه زیر رفتار پیش‌فرض برای تعاملات نقشه با نقشه‌ای که فقط با گزینه‌های zoom و center تعریف شده است را نشان می‌دهد.

کد این نقشه در زیر آمده است.

تایپ اسکریپت 

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

جاوا اسکریپت 

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

کنترل حرکات دست

وقتی کاربر صفحه‌ای را که حاوی نقشه است اسکرول می‌کند، عمل اسکرول کردن می‌تواند ناخواسته باعث بزرگنمایی نقشه شود. این رفتار را می‌توان با استفاده از گزینه gestureHandling map کنترل کرد.

مدیریت حرکات: cooperative

نقشه زیر از گزینه gestureHandling که روی cooperative تنظیم شده است استفاده می‌کند و به کاربر اجازه می‌دهد صفحه را به طور عادی و بدون بزرگنمایی یا حرکت افقی نقشه اسکرول کند. کاربران می‌توانند با کلیک روی کنترل‌های بزرگنمایی، نقشه را بزرگنمایی کنند. همچنین می‌توانند با استفاده از حرکات دو انگشتی روی نقشه برای دستگاه‌های لمسی، بزرگنمایی و حرکت افقی انجام دهند.

کد این نقشه در زیر آمده است.

تایپ اسکریپت 

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

جاوا اسکریپت 

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

مشاهده نمونه

مدیریت حرکات: auto

نقشه بالای صفحه بدون گزینه gestureHandling همان رفتار نقشه قبلی را با تنظیم gestureHandling روی cooperative دارد، زیرا همه نقشه‌های این صفحه درون یک <iframe> قرار دارند. مقدار پیش‌فرض gestureHandling بسته به اینکه نقشه درون یک <iframe> قرار داشته باشد یا خیر auto بین greedy و cooperative تغییر می‌کند.

نقشه درون <iframe> قرار دارد رفتار
بله cooperative
خیر greedy

مدیریت حرکات: greedy

یک نقشه با gestureHandling تنظیم شده روی greedy در زیر آمده است. این نقشه برخلاف cooperative به همه حرکات لمسی و رویدادهای پیمایش واکنش نشان می‌دهد.

مدیریت حرکات: none

گزینه gestureHandling را می‌توان روی none نیز تنظیم کرد تا حرکات روی نقشه غیرفعال شوند.

غیرفعال کردن حرکت افقی و عمودی (پان و زوم)

برای غیرفعال کردن کامل قابلیت حرکت افقی و عمودی نقشه، باید دو گزینه gestureHandling و zoomControl فعال شوند.

تایپ اسکریپت 

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

جاوا اسکریپت 

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

نقشه زیر ترکیب gestureHandling و zoomControl را در کد بالا نشان می‌دهد.

محدود کردن مرزهای نقشه و بزرگنمایی

ممکن است مطلوب باشد که حرکات و کنترل‌های بزرگنمایی را مجاز بدانیم اما نقشه را به یک محدوده خاص یا حداقل و حداکثر بزرگنمایی محدود کنیم. برای انجام این کار، می‌توانید گزینه‌های restriction ، minZoom و maxZoom را تنظیم کنید. کد و نقشه زیر این گزینه‌ها را نشان می‌دهند.

تایپ اسکریپت 

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

جاوا اسکریپت 

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