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

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

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

gestureHandling:‏ 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