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

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

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

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