שליטה בשינוי מרחק התצוגה ובהזזה

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

טיפול בתנועה: 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",
});

הצגת דוגמה

טיפול בתנועה: auto

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

מפה שנמצאת בתוך <iframe> התנהגות
כן cooperative
no greedy

טיפול בתנועה: greedy

למטה מופיעה מפה שבה מוגדר gestureHandling כ-greedy. המפה הזו מגיבה לכל תנועות המגע ואירועי הגלילה, בניגוד ל-cooperative.

טיפול בתנועה: 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,
    },
  },
});