מצלמה ותצוגה

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

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

דוגמאות קוד

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

מבוא

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

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

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

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

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

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

מיקום המצלמה

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

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

יעד (מיקום)

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

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

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

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

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

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

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

ההטיה מגדירה את מיקום המצלמה על קשת ישירות מעל מיקום המרכז של המפה, ומחושבת בזוויות מהנאדיר (הכיוון שמצביע ישירות מתחת למצלמה). הערך 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, העולם כולו הוא בערך ברוחב 1,024dp.

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

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

הזזת המצלמה

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

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

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

הערה: מומלץ להשתמש רק בשיטה הפשוטה יותר. 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));