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

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

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

gestureHandling:‏ auto

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

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

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

בהמשך מופיעה מפה עם ההגדרה greedy של gestureHandling. המפה הזו מגיבה לכל תנועות מגע ואירועי גלילה, בניגוד ל-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 בקוד שלמעלה.

הגבלת גבולות ומרחק מתצוגה במפה

יכול להיות שתרצו לאפשר תנועות ופקדי זום, אבל להגביל את המפה לגבולות מסוימים או לזום מינימלי ומקסימלי. כדי לעשות זאת, אפשר להגדיר את האפשרויות הגבלה, 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