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

בחירת פלטפורמה: 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, והוא משתנה בין 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,
});

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