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

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

بررسی اجمالی

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

رفتار پیش فرض

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

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

TypeScript

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 تنظیم شده است، استفاده می کند، که به کاربر امکان می دهد صفحه را به طور معمول، بدون بزرگنمایی یا حرکت در نقشه حرکت کند. کاربران می توانند با کلیک روی کنترل های بزرگنمایی، نقشه را بزرگنمایی کنند. آنها همچنین می توانند با استفاده از حرکات دو انگشت روی نقشه برای دستگاه های صفحه لمسی بزرگنمایی و حرکت کنند.

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

TypeScript

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 گنجانده شود.

TypeScript

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 را در کد بالا نشان می دهد.

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

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

جاوا اسکریپت

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