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

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

טיפול באמצעות תנועה: 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

לצפייה בדוגמה

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