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

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

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

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