מצלמה ותצוגה

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

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

דוגמאות קוד

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

מבוא

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

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

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

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

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

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

מיקום המצלמה

תצוגת המפה מורכבת ממצלמה עם מבט למטה על מטוס שטוח. מיקום המצלמה (ולכן רינדור המפה) מוגדרים על ידי המאפיינים הבאים: target (קו רוחב/מיקום קו רוחב), bearing, נטייה ו-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 מעלות, התכונות בין המצלמה למיקום המפה נראות גדולות יותר באופן יחסי, בעוד שתכונות שמעבר למיקום המפה לא מופיעות באופן יחסי, מה שגורם לאפקט תלת-ממדי.

Zoom

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

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

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

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 מעלות, הערך במזרח הוא "up".

הגדרת גבולות

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

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

      

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

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

      

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

תרשים שמוצג בו מצלמה LatLngBounds גדולה משטח התצוגה.

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

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

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

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

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

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

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

cameraUpdate
CameraUpdate מתאר לאן להעביר את המצלמה.
callback
אובייקט המטמיע GoogleMap.CancellableCallback. הממשק הכללי הזה לטיפול במשימות מגדיר שתי שיטות 'oncancel()' ו-'onDone()'. עבור אנימציה, השיטות נקראות בנסיבות הבאות:
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))