کنترل کردن بزرگ‌نمایی و حرکت دادن

پلاتفرم را انتخاب کنید: Android iOS JavaScript

نمای کلی

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

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

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

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

TypeScript

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

JavaScript

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

کنترل کردن مدیریت اشاره

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

gestureHandling: cooperative

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

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

TypeScript

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

JavaScript

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

مشاهده نمونه

gestureHandling: auto

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

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

gestureHandling: greedy

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

gestureHandling: none

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

غیرفعال کردن حرکت و بزرگ‌نمایی

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

TypeScript

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

JavaScript

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

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

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

ممکن است بخواهید اشاره‌ها و کنترل‌های بزرگ‌نمایی را مجاز کنید اما نقشه را به محدوده خاص یا حداقل و حداکثر بزرگ‌نمایی محدود کنید. برای انجام این کار می‌توانید گزینه‌های restriction،‏ 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,
    },
  },
});

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