סקירה כללית
השימוש במפה בדף אינטרנט עשוי לדרוש אפשרויות ספציפיות לשליטה באופן שבו המשתמשים מקיימים אינטראקציה עם המפה, כדי לשנות את מרחק התצוגה ולהזיז את המפה. אפשרויות אלה, כגון gestureHandling
, minZoom
, maxZoom
ו-restriction
, מוגדרות בממשק MapOptions.
התנהגות ברירת המחדל
המפה הבאה מדגימה את התנהגות ברירת המחדל לאינטראקציות במפה עם מפה שנוצרה באמצעות מופע של האפשרויות zoom
ו-center
בלבד.
הקוד של המפה הזו מופיע בהמשך.
TypeScript
new google.maps.Map(document.getElementById("map")!, { zoom, center, });
JavaScript
new google.maps.Map(document.getElementById("map"), { zoom, center, });
שליטה בטיפול באמצעות תנועות
כשמשתמש גולל בדף שמכיל מפה, פעולת הגלילה עשויה לגרום בטעות לשינוי מרחק התצוגה במפה. אפשר לשלוט בהתנהגות הזו באמצעות gestureHandling (טיפול) במפה.
טיפול באמצעות תנועה: cooperative
במפה הבאה נעשה שימוש בקבוצת האפשרויות gestureHandling
עד cooperative
, וכך המשתמש יכול לגלול בדף כרגיל, ללא שינוי מרחק התצוגה
או להזיז את המפה. המשתמשים יכולים לשנות את מרחק התצוגה במפה על ידי לחיצה על פקדי הזום. הם
יכולים גם לעשות זום או להזיז את המפה באמצעות תנועות בשתי אצבעות על המפה עבור מסך מגע
מכשירים.
הקוד של המפה הזו מופיע בהמשך.
TypeScript
new google.maps.Map(document.getElementById("map")!, { zoom, center, gestureHandling: "cooperative", });
JavaScript
new google.maps.Map(document.getElementById("map"), { zoom, center, gestureHandling: "cooperative", });
טיפול באמצעות תנועה: 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, });
JavaScript
new google.maps.Map(document.getElementById("map"), { zoom, center, gestureHandling: "none", zoomControl: false, });
המפה הבאה מדגימה את השילוב של 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, }, }, });
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, }, }, });