מצלמה ותצוגה

בחירת פלטפורמה: Android iOS JavaScript

אפשר להטות ולסובב את המפות ב-SDK של מפות ל-Android באמצעות תנועות פשוטות, וכך המשתמשים יכולים לשנות את הכיוון של המפה כך שיהיה נוח להם. בכל רמת זום, אפשר להזיז את המפה או לשנות את נקודת המבט שלה עם זמן אחזור קצר מאוד, בזכות שטח האחסון הקטן יותר של המשבצות של המפה שמבוססות על וקטורים.

דוגמאות קוד

המאגר ApiDemos ב-GitHub כולל דוגמה שממחישה את תכונות המצלמה:

מבוא

בדומה למפות Google באינטרנט, ה-SDK של מפות Google ל-Android מייצג את פני השטח של העולם (כדור) במסך של המכשיר (מישור שטוח) באמצעות הקרנה של מרקטור. בכיוון מזרח ומערב, המפה חוזרת על עצמה ללא הגבלה, כי העולם עוטף את עצמו ללא הפרעות. ב הכיוון הצפוני והדרומי של המפה מוגבל ל-85 מעלות צפונה בערך. ו-85 מעלות דרומה.

הערה: להיטל Mercator יש רוחב סופי. לאורך אבל גובה אינסופי של גובה. אנחנו 'חותכים' את התמונות של המפה הבסיסית באמצעות הקרנה של Mercator בזווית של כ-85 מעלות פלוס/מינוס, כדי שהצורה של המפה שתתקבל תהיה ריבועית. כך אפשר להשתמש בלוגיקה פשוטה יותר לבחירת המשבצות.

באמצעות SDK של מפות ל-Android אפשר לשנות את נקודת המבט של המשתמש במפה על ידי שינוי המצלמה של המפה.

שינויים במצלמה לא ישפיעו על סמנים, שכבות-על או גרפיקה אחרת שהוספתם, אבל מומלץ לשנות את התוספות כך שיתאימו יותר לתצוגה החדשה.

אתם יכולים להאזין לתנועות של המשתמשים במפה, ולשנות אותה בתגובה לבקשות שלהם. לדוגמה, שיטת הקריאה החוזרת OnMapClickListener.onMapClick() מגיבה להקשה אחת על המפה. מכיוון שהשיטה מקבלת את קו הרוחב ואת קו האורך של מיקום ההקשה, תוכלו להגיב עליה על ידי החלקה או שינוי מרחק התצוגה לנקודה הזו. שיטות דומות זמינות כדי להגיב להקשות על בועה של סמן או כדי להגיב לתנועת גרירה על סמן.

אפשר גם להאזין לתנועות המצלמה, כדי שהאפליקציה תקבל התראה כשהמצלמה מתחילה לזוז, זזה כרגע או מפסיקה עובר. פרטים נוספים זמינים במדריך בנושא אירועי שינוי מצלמה.

מיקום המצלמה

תצוגת המפה מודללת כמצלמה שמביטה למטה על מישור שטוח. המיקום של המצלמה (וכתוצאה מכך עיבוד המפה) מוגדר על ידי המאפיינים הבאים: target (הגדרות של קו רוחב/קו אורך), נושא, הטיה, ולשנות את מרחק התצוגה.

תרשים של מאפייני המצלמה

יעד (מיקום)

יעד המצלמה הוא המיקום של מרכז המפה, מוגדר בתור קווי אורך ורוחב.

קו הרוחב יכול להיות בין -85 לבין 85 מעלות, כולל. ערכים מעל הפונקציה תותאם לערך הקרוב ביותר בטווח הזה או מתחת לטווח הזה. לדוגמה, ציון קו רוחב של 100 יגרום להגדרת הערך כ-85. הערך של קו האורך נע בין 180 מעלות ל-180 מעלות, כולל. ערכים מעל או מתחת לערך הזה הטווח ייכלל כך שהוא יהיה בטווח (-180, 180). עבור לדוגמה, הערכים 480, 840 ו-1200 יעטפו ב-120 מעלות.

כיוון (כיוון)

כיוון המצלמה מציין את כיוון המצפן, שנמדד בזוויות מצפון אמיתי, בהתאם לקצה העליון של המפה. אם משרטטים קו אנכי ממרכז המפה עד לקצה העליון של המפה, הכיוון תואם לכותרת המצלמה (נמדדת במעלות) באופן יחסי לצפון האמיתי.

אם הערך של 0 הוא 0, החלק העליון של המפה מפנה לכיוון הצפון האמיתי. כשהערך של כיוון המצפן הוא 90, החלק העליון של המפה מצביע לכיוון מזרח (90 מעלות במצפן). ערך 180 פירושו החלק העליון של הנקודות במפה המיועד דרומה.

באמצעות Maps API אפשר לשנות את כיוון המפה. לדוגמה, נהגים בדרך כלל מסובבים את מפת הכבישים כך שתתאים לכיוון הנסיעה שלהם, ואילו מטיילים שמשתמשים במפה ובמצפן בדרך כלל מסובבים את המפה כך שקו אנכי יצביע לכיוון צפון.

הטיה (זווית צפייה)

ההטיה מגדירה את מיקום המצלמה על קשת ישירות מעל מיקום המרכז של המפה, ומחושבת בזוויות מהנאדיר (הכיוון שמצביע ישירות מתחת למצלמה). הערך 0 תואם לסמל המצלמה שמצביע ישר למטה. ערכים גדולים מ-0 מתאימים למצלמה שמשויכת לה הטיה של מספר המעלות שצוין לכיוון האופק. כשמשנים את זווית התצוגה, המפה מוצגת בתצוגת תלת-ממד, שבה תכונות שנמצאות רחוק נראות קטנות יותר ותכונות שנמצאות קרוב נראות גדולות יותר. האיורים הבאים מדגימים זאת.

בתמונות הבאות, זווית הצפייה היא 0 מעלות. בתמונה הראשונה מוצגת תרשים של המצב הזה: המיקום 1 הוא מיקום המצלמה, והמיקום 2 הוא המיקום הנוכחי במפה. המפה שנוצרה מוצגת מתחת.

צילום מסך של מפה עם מצלמה שממוקמת בזווית צפייה של 0 מעלות, ברמת זום של 18.
המפה שמוצגת עם זווית הצפייה שמוגדרת כברירת המחדל של המצלמה.
תרשים שמציג את מיקום ברירת המחדל של המצלמה, ישירות מעל המיקום במפה, בזווית של 0 מעלות.
זווית הצפייה שמוגדרת כברירת מחדל במצלמה.

בתמונות הבאות, זווית הצפייה היא 45 מעלות. שימו לב שהמצלמה נעה למחצית קשת בין מיקום ישר מעל הראש (0 מעלות) לבין מיקום על הקרקע (90 מעלות), למיקום 3. המצלמה עדיין מכוונת לנקודת המרכז של המפה, אבל האזור שמיוצג על ידי הקו במיקום 4 גלוי עכשיו.

צילום מסך של מפה עם מצלמה שממוקמת בזווית צפייה של 45 מעלות, ברמת זום 18.
המפה מוצגת מזווית צפייה של 45 מעלות.
דיאגרמה שבה מוצגת זווית הצפייה של המצלמה שמוגדרת ל-45 מעלות, ורמת הזום עדיין מוגדרת ל-18.
זווית צפייה של המצלמה של 45 מעלות.

המפה בצילום המסך הזה עדיין ממורכזת באותה נקודה המפה המקורית, אבל תכונות נוספות הופיעו בחלק העליון של המפה. ככל שהזווית גדלה מעבר ל-45 מעלות, האובייקטים שבין המצלמה לבין מיקום המפה נראים גדולים יותר באופן יחסי, ואילו האובייקטים שמעבר למיקום המפה נראים קטנים יותר באופן יחסי, וכך נוצר אפקט תלת-ממדי.

שינוי מרחק התצוגה

רמת הזום של המצלמה קובעת את קנה המידה של המפה. ברמות זום גדולות יותר אפשר לראות יותר פרטים במסך, וברמות זום קטנות יותר אפשר לראות יותר מהעולם במסך. ברמת הזום 0, קנה המידה של המפה הוא כזה שהרוחב של העולם כולו הוא כ-256dp (פיקסלים שאינם תלויים בדחיסות).

הגדלת רמת הזום ב-1 מכפילה את רוחב העולם במסך. לכן ברמת הזום N, רוחב העולם הוא בערך 256 * 2N dp. לדוגמה, ברמת זום 2, העולם כולו הוא פחות או יותר רוחב של 1024dp.

רמת הזום לא חייבת להיות מספר שלם. טווח רמות הזום המותרות במפה תלוי בכמה גורמים, כולל היעד, סוג המפה וגודל המסך. כל מספר מחוץ לטווח יופיע כערך החוקי הקרוב ביותר, שיכול להיות רמת הזום המינימלית או רמת הזום המקסימלית. ברשימה הבאה מפורטת רמת הפירוט המשוערת שאפשר לראות בכל רמת זום:

  • 1: עולם
  • 5: פני השטח/יבשת
  • 10: עיר
  • 15: רחובות
  • 20: מבנים
בתמונות הבאות מוצג המראה החזותי של רמות זום שונות:
צילום מסך של מפה ברמת זום 5
מפה ברמת זום 5.
צילום מסך של מפה ברמת זום 15
מפה ברמת זום 15.
צילום מסך של מפה ברמת זום 20
מפה ברמת זום 20.

הזזת המצלמה

ה-API של מפות Google מאפשר לכם לשנות את החלק בעולם הגלוי מפה כדי לעשות זאת, משנים את מיקום המצלמה (במקום להזיז את המפה).

כשמשנים את המצלמה, אפשר להוסיף אנימציה לתנועת המצלמה שנובעת מכך. האנימציה עוברת אינטרפולציה בין המצלמה הנוכחית ואת מאפייני המצלמה החדשים. אפשר גם לשלוט משך האנימציה.

כדי לשנות את המיקום של המצלמה, צריך לציין לאן רוצים להזיז אותה באמצעות CameraUpdate. באמצעות Maps API תוכלו ליצור סוגים רבים של CameraUpdate באמצעות CameraUpdateFactory. אלה האפשרויות הזמינות:

שינוי מרחק התצוגה והגדרת מרחק מינימלי/מקסימלי

CameraUpdateFactory.zoomIn() ו- CameraUpdateFactory.zoomOut() נותן לך CameraUpdate שמשנה את רמת הזום ב-1.0, תוך שמירה על כל שאר המאפיינים זהים.

CameraUpdateFactory.zoomTo(float) נותן ערך של CameraUpdate שמשנה את מרחק התצוגה לערך הנתון, תוך שמירה על כל שאר הנכסים ללא שינוי.

CameraUpdateFactory.zoomBy(float) וגם CameraUpdateFactory.zoomBy(float, Point) נותן לך CameraUpdate עולה (או יורד, אם הערך הוא שלילי) רמת הזום בערך הנתון. במצב השני, הנקודה נותרת באותו מיקום (קו הרוחב/קו האורך) במסך, ולכן יכול להיות שהמיקום של המצלמה ישתנה כדי להשיג זאת.

מומלץ להגדיר רמה מינימלית ו/או מקסימלית מועדפת לשינוי מרחק התצוגה. לדוגמה, אפשר להשתמש באפשרות הזו כדי לשלוט בחוויית המשתמש אם באפליקציה מוצג אזור מוגדר סביב נקודת עניין, או אם אתם משתמשים בשכבת-על מותאמת אישית של משבצות עם קבוצה מוגבלת של רמות זום.

Kotlin

private lateinit var map: GoogleMap

    map.setMinZoomPreference(6.0f)
    map.setMaxZoomPreference(14.0f)

      

Java

private GoogleMap map;
    map.setMinZoomPreference(6.0f);
    map.setMaxZoomPreference(14.0f);

      

שימו לב שיש שיקולים טכניים שעשויים למנוע מה-API כך שמשתמשים יכולים להגדיל את התצוגה נמוכה או גבוהה מדי. לדוגמה: לוויין או פני שטח עשוי להיות מרחק מקסימלי נמוך יותר מאשר פקדי המפה הבסיסית.

שינוי מיקום המצלמה

יש שתי שיטות נוחות לשינויים נפוצים במיקום. CameraUpdateFactory.newLatLng(LatLng) נותן ערך CameraUpdate שמשנה את קו הרוחב וקו האורך של המצלמה תוך שימור כל שאר המאפיינים. CameraUpdateFactory.newLatLngZoom(LatLng, float) מחזירה את הפונקציה CameraUpdate שמשנה את קו הרוחב, קו האורך והזום של המצלמה, תוך שמירה על כל שאר המאפיינים.

כדי לשנות את מיקום המצלמה בצורה גמישה, משתמשים ב-CameraUpdateFactory.newCameraPosition(CameraPosition), שמציג את האפשרות CameraUpdate להזזת המצלמה למיקום הרצוי. אפשר לקבל CameraPosition ישירות באמצעות new CameraPosition() או באמצעות CameraPosition.Builder באמצעות new CameraPosition.Builder().

הזזה (גלילה)

CameraUpdateFactory.scrollBy(float, float) נותן לך CameraUpdate משנה את קווי האורך והרוחב של המצלמה, כך שהמפה זזה את מספר הפיקסלים שצוין. ערך x חיובי גורם למצלמה לזוז ימינה, כך שהמפה נראית כאילו היא זזה שמאלה. y חיובי גורם למצלמה לנוע למטה, כך שנראה שהמפה זזה למעלה. לעומת זאת, ערכי x שליליים גורמים למצלמה לנוע שמאלה, כך שנראה שהמפה זזה ימינה וערכי y שליליים גורמים להזיז את המצלמה למעלה. הגלילה היא ביחס לכיוון הנוכחי של המצלמה. לדוגמה, אם למצלמה יש כיוון של 90 מעלות, אז לכיוון מזרח הוא 'למעלה'.

הגדרת גבולות

הגדרת גבולות המפה

לפעמים כדאי להעביר את מצלמה כך שאזור עניין שלם ייראה בצורה הטובה ביותר. רמת הזום. לדוגמה, אם אתם מציגים את כל תחנות הדלק בתוך במרחק של 5 ק"מ מהמיקום הנוכחי של המשתמש, כדאי להזיז את המצלמה שהם גלויים לכולם במסך. כדי לעשות זאת, קודם צריך לחשב את הערך של LatLngBounds שרוצים שיהיה גלוי במסך. לאחר מכן תוכלו להשתמש ב-CameraUpdateFactory.newLatLngBounds(LatLngBounds bounds, int padding) כדי לקבל CameraUpdate שמשנה את מיקום המצלמה כך ש-LatLngBounds נתון יתאים לגמרי במפה, תוך התחשבות ב-padding (בפיקסלים) שצוין. הערך שהוחזר: CameraUpdate מבטיח שהפער (בפיקסלים) בין הגבולות הנתונים לקצה המפה תהיה בגודל של המרווח הפנימי שצוין לפחות. חשוב לזכור שההטיה והכיוון של המפה יהיו 0.

Kotlin

val australiaBounds = LatLngBounds(
    LatLng((-44.0), 113.0),  // SW bounds
    LatLng((-10.0), 154.0) // NE bounds
)
map.moveCamera(CameraUpdateFactory.newLatLngBounds(australiaBounds, 0))

      

Java

LatLngBounds australiaBounds = new LatLngBounds(
    new LatLng(-44, 113), // SW bounds
    new LatLng(-10, 154)  // NE bounds
);
map.moveCamera(CameraUpdateFactory.newLatLngBounds(australiaBounds, 0));

      

מרכוז המפה בתוך אזור

במקרים מסוימים, כדאי למרכז את המצלמה בתוך גבולות במקום כולל הגבולות הקיצוניים. לדוגמה, כדי למקם את המצלמה במרכזה של מדינה מסוימת תוך שמירה על זום קבוע. במקרה הזה אפשר להשתמש בשיטה דומה, באמצעות יצירה של LatLngBounds CameraUpdateFactory.newLatLngZoom(LatLng latLng, float zoom) עם LatLngBounds.השיטה getCenter(). השיטה getCenter() תחזיר את הערך המרכז הגיאוגרפי של LatLngBounds.

Kotlin

val australiaBounds = LatLngBounds(
    LatLng((-44.0), 113.0),  // SW bounds
    LatLng((-10.0), 154.0) // NE bounds
)
map.moveCamera(CameraUpdateFactory.newLatLngZoom(australiaBounds.center, 10f))

      

Java

LatLngBounds australiaBounds = new LatLngBounds(
    new LatLng(-44, 113), // SW bounds
    new LatLng(-10, 154)  // NE bounds
);
map.moveCamera(CameraUpdateFactory.newLatLngZoom(australiaBounds.getCenter(), 10));

      

עומס יתר של השיטה newLatLngBounds(boundary, width, height, padding) מאפשר לציין רוחב וגובה בפיקסלים של מלבן, כך שהם יתואמו למאפייני המפה. המלבן ממוקם כך שהמרכז שלו זהה לזה של תצוגת המפה (כך שאם המאפיינים שצוינו זהים לאלה של בתצוגת המפה, ואז המלבן חופף לתצוגת המפה). הפקודה CameraUpdate תזיז את המצלמה כך LatLngBounds במרכז המסך בתוך המלבן הנתון מרחק התצוגה הגבוה ביותר האפשרי, תוך התייחסות למרווח הפנימי הנדרש.

הערה: מומלץ להשתמש רק בשיטה הפשוטה ביותר newLatLngBounds(boundary, padding) כדי ליצור CameraUpdate אם הוא ישמש להעברה המצלמה אחרי שהמפה עברה פריסה. במהלך יצירת הפריסה, ה-API מחשב את גבולות התצוגה של המפה שנדרשים כדי להקרין בצורה נכונה את תיבת הגבול. לשם השוואה, אפשר להשתמש CameraUpdate הוחזרו בשיטה המורכבת יותר newLatLngBounds(boundary, width, height, padding) בכל עת, עוד לפני שהמפה עברה פריסה, מכיוון שה-API מחשבת את גבולות התצוגה מהארגומנטים שאתם מעבירים.

הגבלת התנועה האופקית של המשתמש לאזור נתון

בתרחישים שלמעלה, אתם מגדירים את גבולות המפה אבל המשתמש ואז לגלול או להזיז את המפה מחוץ לגבולות האלה. במקום זאת, להגביל את גבולות מרכז הרוחב/האורך של נקודת המוקד במפה (המצלמה ), כך שהמשתמשים יוכלו לגלול ולהזיז רק את הגבולות האלה. לדוגמה, באפליקציה של מרכז קניות או של שדה תעופה יכול להיות שתרצו להגביל את המפה לגבולות מסוימים, ולאפשר למשתמשים לגלול ולזוז בתוך הגבולות האלה.

Kotlin

// Create a LatLngBounds that includes the city of Adelaide in Australia.
val adelaideBounds = LatLngBounds(
    LatLng(-35.0, 138.58),  // SW bounds
    LatLng(-34.9, 138.61) // NE bounds
)

// Constrain the camera target to the Adelaide bounds.
map.setLatLngBoundsForCameraTarget(adelaideBounds)

      

Java

// Create a LatLngBounds that includes the city of Adelaide in Australia.
LatLngBounds adelaideBounds = new LatLngBounds(
    new LatLng(-35.0, 138.58), // SW bounds
    new LatLng(-34.9, 138.61)  // NE bounds
);

// Constrain the camera target to the Adelaide bounds.
map.setLatLngBoundsForCameraTarget(adelaideBounds);

      

התרשים הבא מדגים תרחיש שבו יעד המצלמה מוגבל לאזור גדול במעט מאזור התצוגה. המשתמש יכול גוללים ומזיזים, בתנאי שיעד המצלמה נשאר בתוך האזור התחום. הצלב מייצג את יעד המצלמה:

תרשים שמראה LatLngBounds של מצלמה גדול מ-
      אזור התצוגה.

המפה תמיד ממלאת את אזור התצוגה, גם אם כתוצאה מכך מוצגים באזור התצוגה אזורים מחוץ לגבולות שהוגדרו. לדוגמה, אם תמקם את יעד המצלמה בפינה של האזור התחום, האזור שמעבר לפינה גלויים באזור התצוגה, אבל המשתמשים לא יכולים לגלול עוד לתוך האזור. התרחיש הזה מתואר בתרשים הבא. הצלב מייצג את המצלמה target:

תרשים שבו מוצג יעד המצלמה שממוקם בפינה השמאלית התחתונה של LatLngBounds של המצלמה.

בתרשים הבא, לטווח המצלמה יש גבולות מוגבלים מאוד, ולכן למשתמש יש מעט מאוד אפשרויות לגלול במפה או לשנות את זווית התצוגה שלה. הצלב מייצג את יעד המצלמה:

תרשים שמראה LatLngBounds של מצלמה קטן מ-
      אזור התצוגה.

התצוגה של המצלמה מתעדכנת

כדי להחיל CameraUpdate על המפה, אפשר להזיז מצלמה באופן מיידי או הוספת אנימציה למצלמה בצורה חלקה. כדי להזיז את המצלמה באופן מיידי בעזרת CameraUpdate, אפשר להתקשר GoogleMap.moveCamera(CameraUpdate).

כדי לשפר את חוויית המשתמש, במיוחד במקרים של תנועות קצרות, אפשר להוסיף אנימציה לשינוי. כדי לעשות זאת, במקום להתקשר למספר GoogleMap.moveCamera, מתקשרים למספר GoogleMap.animateCamera. המפה תעבור בצורה חלקה למאפיינים החדשים. בצורה המפורטת ביותר של השיטה הזו, GoogleMap.animateCamera(cameraUpdate, duration, callback), כוללת שלושה ארגומנטים:

cameraUpdate
הCameraUpdate שמסביר לאן להזיז את המצלמה.
callback
אובייקט שמטמיע GoogleMap.CancellableCallback. הממשק הכללי הזה לטיפול במשימות מגדיר שתי שיטות 'onCancel() ' ו-'onFinished() '. באנימציה, השיטות נקראות בנסיבות הבאות:
onFinish()
האירוע הזה מופעל אם האנימציה מסתיימת ללא הפרעה.
onCancel()

מופעל אם האנימציה מופסקת על ידי התקשרות stopAnimation() או התחלת תנועת מצלמה חדשה.

אפשרות נוספת היא להקיש על GoogleMap.stopAnimation().

duration
משך הזמן הרצוי של האנימציה, באלפיות שנייה, כ-int.

קטעי הקוד הבאים ממחישים כמה מהדרכים הנפוצות להעברת מצלמה.

Kotlin

val sydney = LatLng(-33.88, 151.21)
val mountainView = LatLng(37.4, -122.1)

// Move the camera instantly to Sydney with a zoom of 15.
map.moveCamera(CameraUpdateFactory.newLatLngZoom(sydney, 15f))

// Zoom in, animating the camera.
map.animateCamera(CameraUpdateFactory.zoomIn())

// Zoom out to zoom level 10, animating with a duration of 2 seconds.
map.animateCamera(CameraUpdateFactory.zoomTo(10f), 2000, null)

// Construct a CameraPosition focusing on Mountain View and animate the camera to that position.
val cameraPosition = CameraPosition.Builder()
    .target(mountainView) // Sets the center of the map to Mountain View
    .zoom(17f)            // Sets the zoom
    .bearing(90f)         // Sets the orientation of the camera to east
    .tilt(30f)            // Sets the tilt of the camera to 30 degrees
    .build()              // Creates a CameraPosition from the builder
map.animateCamera(CameraUpdateFactory.newCameraPosition(cameraPosition))

      

Java

LatLng sydney = new LatLng(-33.88,151.21);
LatLng mountainView = new LatLng(37.4, -122.1);

// Move the camera instantly to Sydney with a zoom of 15.
map.moveCamera(CameraUpdateFactory.newLatLngZoom(sydney, 15));

// Zoom in, animating the camera.
map.animateCamera(CameraUpdateFactory.zoomIn());

// Zoom out to zoom level 10, animating with a duration of 2 seconds.
map.animateCamera(CameraUpdateFactory.zoomTo(10), 2000, null);

// Construct a CameraPosition focusing on Mountain View and animate the camera to that position.
CameraPosition cameraPosition = new CameraPosition.Builder()
    .target(mountainView )      // Sets the center of the map to Mountain View
    .zoom(17)                   // Sets the zoom
    .bearing(90)                // Sets the orientation of the camera to east
    .tilt(30)                   // Sets the tilt of the camera to 30 degrees
    .build();                   // Creates a CameraPosition from the builder
map.animateCamera(CameraUpdateFactory.newCameraPosition(cameraPosition));