שליטה בהגדלה ובזזת התצוגה

בחירת פלטפורמה: 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.

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

לדוגמה

gestureHandling: auto

המפה בחלק העליון של הדף ללא האפשרות gestureHandling מתנהגת כמו המפה הקודמת עם gestureHandling שמוגדרת ל-cooperative, כי כל המפות בדף הזה נמצאות בתוך <iframe>. ערך ברירת המחדל של gestureHandling,‏ auto, משתנה בין greedy ל-cooperative בהתאם לשאלה אם המפה מוכלת ב-<iframe>.

מפה שמופיעה בתוך <iframe> התנהגות
כן cooperative
לא 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,
});
index.ts

JavaScript

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

בדוגמה של המפה שבהמשך אפשר לראות את השילוב של 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,
    },
  },
});
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