מצלמה ותצוגה

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

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

דוגמאות קוד

במאגר של ApiDemos ב-GitHub יש דוגמה שמדגימה את הפיצ'רים של המצלמה:

• CameraDemoActivity – Java: שינוי מיקום המצלמה
• CameraDemoActivity – Kotlin: שינוי מיקום המצלמה

מבוא

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

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

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

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

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

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

מיקום המצלמה

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

טירגוט (מיקום)

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

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

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

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

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

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

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

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

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

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

זווית הצפייה שמוגדרת כברירת מחדל במצלמה.

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

המפה מוצגת בזווית צפייה של 45 מעלות.

זווית צפייה של 45 מעלות.

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

Zoom

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

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

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

• 1: עולם
• 5: ארץ/יבשת
• 10: עיר
• 15: רחובות
• 20: מבנים

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

בתמונות הבאות אפשר לראות את המראה החזותי של רמות שונות של מרחק התצוגה:

מפה ברמת זום 5.

מפה ברמת זום 15.

מפה ברמת זום 20.

הזזת המצלמה

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

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

הערה: כל תנועות המצלמה הפרוגרמטיות מחושבות לפי הגודל של האובייקט GoogleMap אחרי שהמערכת מביאה בחשבון את המרווח הפנימי שנוסף למפה. לדוגמה, הוספת מרווח של 100 פיקסלים לקצה השמאלי של המפה תזיז את מרכז המפה ימינה ב-50 פיקסלים. מידע נוסף זמין במסמכי התיעוד בנושא מרווח פנימי במפה.

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

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

CameraUpdateFactory.zoomIn() ו-CameraUpdateFactory.zoomOut() מחזירים CameraUpdate שמשנה את מרחק התצוגה ב-1.0, תוך שמירה על אותו הדבר בכל שאר הנכסים.

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

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

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

Java

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

      

Kotlin

private lateinit var map: GoogleMap

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

Java

LatLngBounds australiaBounds = new LatLngBounds(
    new LatLng(-44, 113), // SW bounds
    new LatLng(-10, 154)  // NE bounds
);
map.moveCamera(CameraUpdateFactory.newLatLngBounds(australiaBounds, 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))

      

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

מרכוז המפה בתוך אזור מסוים

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

Java

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

      

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))

      

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

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

הגבלת ההזזה של המשתמש לאזור נתון

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

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);

      

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)

      

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

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

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

מתבצע עדכון של תצוגת המצלמה

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

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

cameraUpdate

הCameraUpdate שמתאר לאן להזיז את המצלמה.

callback

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

onFinish()

האנימציה מופעלת ללא הפרעה.

onCancel()

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

לחלופין, ייתכן שהסיבה לכך היא שמתקשרים אל GoogleMap.stopAnimation().

duration

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

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

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));

      

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))