Street View

ב-Google Street View אפשר לראות תמונות פנורמיות של 360 מעלות מכבישים ייעודיים בכל אזור הכיסוי.

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

הכיסוי שזמין דרך Google Maps Android API v2 זהה לכיסוי של אפליקציית מפות Google במכשיר Android. מידע נוסף על Street View ועל האזורים הנתמכים זמין במפה האינטראקטיבית במאמר מידע על Street View.

הכיתה StreetViewPanorama יוצרת מודל של התצוגה הרחבה של Street View באפליקציה. בממשק המשתמש, תמונה פנורמית מיוצגת על ידי אובייקט StreetViewPanoramaFragment או StreetViewPanoramaView.

דוגמאות קוד

מאגר ApiDemos ב-GitHub כולל דוגמאות שממחישות את השימוש ב-Street View.

דוגמאות ל-Kotlin:

• StreetViewPanoramaBasicDemoActivity: העקרונות הבסיסיים של השימוש ב-Street View
• StreetViewPanoramaEventsDemoActivity: האזנה לאירועים
• StreetViewPanoramaNavigationDemoActivity: שליטה פרוגרמטית בפנורמות של Street View
• StreetViewPanoramaOptionsDemoActivity: שינוי ממשק המשתמש והאפשרויות של התנועות
• StreetViewPanoramaViewDemoActivity: שימוש ב-StreetViewPanoramaView (במקום ב-Fragment)
• SplitStreetViewPanoramaAndMapDemoActivity: שימוש בפעילות שמציגה תמונה פנורמית של Street View ומפה

דוגמאות ל-Java:

• StreetViewPanoramaBasicDemoActivity: העקרונות הבסיסיים של השימוש ב-Street View
• StreetViewPanoramaEventsDemoActivity: האזנה לאירועים
• StreetViewPanoramaNavigationDemoActivity: שליטה פרוגרמטית בפנורמות של Street View
• StreetViewPanoramaOptionsDemoActivity: שינוי אפשרויות הממשק והמחוות
• StreetViewPanoramaViewDemoActivity: שימוש ב-StreetViewPanoramaView (במקום ב-Fragment)
• SplitStreetViewPanoramaAndMapDemoActivity: יצירת פעילות שמציגה תמונה פנורמית של Street View ומפה

סקירה כללית על Street View ב-SDK של מפות ל-Android

‏SDK של מפות ל-Android מספק שירות Street View לקבלת תמונות שנעשה בהן שימוש ב-Google Street View ולביצוע פעולות עיבוד עליהן. התמונות יחזרו כתמונות פנורמיות.

כל תמונה פנורמית ב-Street View היא תמונה אחת או קבוצה של תמונות שמספקות תצוגה מלאה של 360 מעלות ממיקום אחד. התמונות תואמות לפרויקציה של צילום אופקי (Plate Carrée), שמכילה תצוגה אופקי של 360 מעלות (צילום מקיף) ותצוגה אנכית של 180 מעלות (מהחלק העליון של התמונה לחלק התחתון). התוצאה היא תמונה פנורמית של 360 מעלות שמגדירה הקרנה על פני ספירה, כאשר התמונה מודבקת על פני השטח הדו-מימדי של אותה ספירה.

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

שנתחיל?

הגדרת פרויקט

פועלים לפי מדריך למתחילים כדי להגדיר פרויקט של Maps SDK ל-Android.

איך בודקים אם אפשר להוסיף פנורמה של Street View

ספריית הלקוח של Google Play Services SDK כוללת כמה דוגמאות ל-Street View שאפשר לייבא לפרויקט ולהשתמש בהן כבסיס לפיתוח. במבוא מפורטות הנחיות לייבוא הדוגמאות.

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

שימוש ב-API

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

הוספת תמונה פנורמית של Street View

כדי להוסיף תמונה פנורמית של Street View כמו זו:

לסיכום:

1. מוסיפים אובייקט Fragment לActivity שיטפל בתמונה הפנורמית של Street View. הדרך הקלה ביותר לעשות זאת היא להוסיף רכיב <fragment> לקובץ הפריסה של Activity.
2. מטמיעים את הממשק OnStreetViewPanoramaReadyCallback ומשתמשים בשיטת ה-callback‏ onStreetViewPanoramaReady(StreetViewPanorama) כדי לקבל אחיזה לאובייקט StreetViewPanorama.
3. כדי לרשום את הקריאה החוזרת, צריך להפעיל את getStreetViewPanoramaAsync() בקוד הפלח.

בהמשך מפורטים פרטים נוספים על כל שלב.

הוספת קטע קוד

מוסיפים רכיב <fragment> לקובץ הפריסה של הפעילות כדי להגדיר אובייקט Fragment. באלמנט הזה, מגדירים את המאפיין class לערך com.google.android.gms.maps.StreetViewPanoramaFragment (או SupportStreetViewPanoramaFragment).

דוגמה לקטע בקובץ פריסה:

<fragment
    android:name="com.google.android.gms.maps.StreetViewPanoramaFragment"
    android:id="@+id/streetviewpanorama"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

הוספת קוד Street View

כדי לעבוד עם התצוגה הפנורמית של Street View באפליקציה, צריך להטמיע את הממשק OnStreetViewPanoramaReadyCallback ולהגדיר מופע של פונקציית ה-callback באובייקט StreetViewPanoramaFragment או StreetViewPanoramaView. במדריך הזה נעשה שימוש ב-StreetViewPanoramaFragment כי זו הדרך הפשוטה ביותר להוסיף את Street View לאפליקציה. השלב הראשון הוא להטמיע את ממשק הקריאה החוזרת (callback):

class StreetViewActivity : AppCompatActivity(), OnStreetViewPanoramaReadyCallback {
    // ...
}

      

class StreetViewActivity extends AppCompatActivity implements OnStreetViewPanoramaReadyCallback {
    // ...
}

      

בשיטה onCreate() של Activity, מגדירים את קובץ הפריסה בתור תצוגת התוכן. לדוגמה, אם שם קובץ הפריסה הוא main.xml, צריך להשתמש בקוד הזה:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_street_view)
    val streetViewPanoramaFragment =
        supportFragmentManager
            .findFragmentById(R.id.street_view_panorama) as SupportStreetViewPanoramaFragment
    streetViewPanoramaFragment.getStreetViewPanoramaAsync(this)
}

      

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_street_view);
    SupportStreetViewPanoramaFragment streetViewPanoramaFragment =
        (SupportStreetViewPanoramaFragment) getSupportFragmentManager()
            .findFragmentById(R.id.street_view_panorama);
    streetViewPanoramaFragment.getStreetViewPanoramaAsync(this);
}

      

כדי לקבל את ה-handle של ה-fragment, צריך להפעיל את FragmentManager.findFragmentById() ולהעביר לו את מזהה המשאב של האלמנט <fragment>. שימו לב שמזהה המשאב R.id.streetviewpanorama מתווסף באופן אוטומטי לפרויקט Android כשמפתחים את קובץ הפריסה.

לאחר מכן משתמשים ב-getStreetViewPanoramaAsync() כדי להגדיר את קריאת החזרה (callback) בחלק.

val streetViewPanoramaFragment =
    supportFragmentManager
        .findFragmentById(R.id.street_view_panorama) as SupportStreetViewPanoramaFragment
streetViewPanoramaFragment.getStreetViewPanoramaAsync(this)

      

SupportStreetViewPanoramaFragment streetViewPanoramaFragment =
    (SupportStreetViewPanoramaFragment) getSupportFragmentManager()
        .findFragmentById(R.id.street_view_panorama);
streetViewPanoramaFragment.getStreetViewPanoramaAsync(this);

      

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

override fun onStreetViewPanoramaReady(streetViewPanorama: StreetViewPanorama) {
    val sanFrancisco = LatLng(37.754130, -122.447129)
    streetViewPanorama.setPosition(sanFrancisco)
}

      

@Override
public void onStreetViewPanoramaReady(StreetViewPanorama streetViewPanorama) {
    LatLng sanFrancisco = new LatLng(37.754130, -122.447129);
    streetViewPanorama.setPosition(sanFrancisco);
}

      

מידע נוסף על הגדרת המצב הראשוני

בניגוד למפה, אי אפשר להגדיר את המצב הראשוני של התצוגה הפנורמית של Street View באמצעות קובץ XML. עם זאת, אפשר להגדיר את התמונה הפנורמית באופן פרוגרמטי על ידי העברת אובייקט StreetViewPanoramaOptions שמכיל את האפשרויות שציינתם.

• אם אתם משתמשים ב-StreetViewPanoramaFragment, השתמשו ב-method הסטטי של המפעל StreetViewPanoramaFragment.newInstance(StreetViewPanoramaOptions options) כדי ליצור את החלק ולהעביר את האפשרויות שהוגדרו בהתאמה אישית.
• אם אתם משתמשים ב-StreetViewPanoramaView, השתמשו ב-constructor‏ StreetViewPanoramaView(Context, StreetViewPanoramaOptions) והעבירו את האפשרויות שהוגדרו בהתאמה אישית.

val sanFrancisco = LatLng(37.754130, -122.447129)
val view = StreetViewPanoramaView(
    this,
    StreetViewPanoramaOptions().position(sanFrancisco)
)

      

LatLng sanFrancisco = new LatLng(37.754130, -122.447129);
StreetViewPanoramaView view = new StreetViewPanoramaView(this,
    new StreetViewPanoramaOptions().position(sanFrancisco));

      

מידע נוסף על StreetViewPanoramaFragment

StreetViewPanoramaFragment הוא תת-סוג של הכיתה Android Fragment, ומאפשר להציב תמונה פנורמית של Street View בחלק מקוד ב-Android. אובייקטים מסוג StreetViewPanoramaFragment משמשים כקונטיינרים לתמונה הפנורמית ומספקים גישה לאובייקט StreetViewPanorama.

StreetViewPanoramaView

StreetViewPanoramaView, תת-סוג של הכיתה View ב-Android, מאפשר להציב תמונה פנורמית של Street View ב-View של Android. View מייצג אזור מלבני במסך, והוא אבן בניין בסיסית לאפליקציות ולווידג'טים של Android. בדומה ל-StreetViewPanoramaFragment, ה-StreetViewPanoramaView משמש כקונטיינר לתמונה הפנורמית, ומציג את הפונקציונליות הבסיסית באמצעות האובייקט StreetViewPanorama. משתמשים בכיתה הזו צריכים להעביר את כל השיטות של מחזור החיים של הפעילות (כמו onCreate(),‏ onDestroy(),‏ onResume() ו-onPause())) לשיטות התואמות בכיתה StreetViewPanoramaView.

התאמה אישית של הפונקציונליות שבשליטת המשתמש

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

מגדירים את המיקום של התמונה הפנורמית.

כדי להגדיר את המיקום של הפנורמה ב-Street View, צריך להפעיל את הפונקציה StreetViewPanorama.setPosition() ולהעביר את הערך LatLng. אפשר גם להעביר את radius ו-source כפרמטרים אופציונליים.

אפשר להשתמש ברדיוס כדי להרחיב או לצמצם את האזור שבו מערכת Street View תחפש תמונה פנורמית תואמת. אם הרדיוס הוא 0, המשמעות היא שצריך לקשר את התמונה הפנורמית בדיוק ל-LatLng שצוין. רדיוס ברירת המחדל הוא 50 מטרים. אם יש יותר מפנורמה אחת באזור ההתאמה, ה-API יחזיר את ההתאמה הטובה ביותר.

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

val sanFrancisco = LatLng(37.754130, -122.447129)

// Set position with LatLng only.
streetViewPanorama.setPosition(sanFrancisco)

// Set position with LatLng and radius.
streetViewPanorama.setPosition(sanFrancisco, 20)

// Set position with LatLng and source.
streetViewPanorama.setPosition(sanFrancisco, StreetViewSource.OUTDOOR)

// Set position with LaLng, radius and source.
streetViewPanorama.setPosition(sanFrancisco, 20, StreetViewSource.OUTDOOR)

      

LatLng sanFrancisco = new LatLng(37.754130, -122.447129);

// Set position with LatLng only.
streetViewPanorama.setPosition(sanFrancisco);

// Set position with LatLng and radius.
streetViewPanorama.setPosition(sanFrancisco, 20);

// Set position with LatLng and source.
streetViewPanorama.setPosition(sanFrancisco, StreetViewSource.OUTDOOR);

// Set position with LaLng, radius and source.
streetViewPanorama.setPosition(sanFrancisco, 20, StreetViewSource.OUTDOOR);

      

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

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

streetViewPanorama.location.links.firstOrNull()?.let { link: StreetViewPanoramaLink ->
    streetViewPanorama.setPosition(link.panoId)
}

      

StreetViewPanoramaLocation location = streetViewPanorama.getLocation();
if (location != null && location.links != null) {
    streetViewPanorama.setPosition(location.links[0].panoId);
}

      

הגדלה והקטנה של התצוגה

אפשר לשנות את רמת הזום באופן פרוגרמטי על ידי הגדרת StreetViewPanoramaCamera.zoom. הגדרת הזום ל-1.0 תגדיל את התמונה פי 2.

קטע הקוד הבא משתמש ב-StreetViewPanoramaCamera.Builder() כדי ליצור מצלמה חדשה עם הטיה והכיוון של המצלמה הקיימת, תוך הגדלת הזום ב-50%.

val zoomBy = 0.5f
val camera = StreetViewPanoramaCamera.Builder()
    .zoom(streetViewPanorama.panoramaCamera.zoom + zoomBy)
    .tilt(streetViewPanorama.panoramaCamera.tilt)
    .bearing(streetViewPanorama.panoramaCamera.bearing)
    .build()

      

float zoomBy = 0.5f;
StreetViewPanoramaCamera camera = new StreetViewPanoramaCamera.Builder()
    .zoom(streetViewPanorama.getPanoramaCamera().zoom + zoomBy)
    .tilt(streetViewPanorama.getPanoramaCamera().tilt)
    .bearing(streetViewPanorama.getPanoramaCamera().bearing)
    .build();

      

הגדרת כיוון המצלמה (נקודת המבט)

כדי לקבוע את הכיוון של מצלמת Street View, מגדירים את המיקום וההטיה ב-StreetViewPanoramaCamera.

כיוון

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

הטיה

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

קטע הקוד הבא משתמש ב-StreetViewPanoramaCamera.Builder() כדי ליצור מצלמה חדשה עם מרחק התצוגה וההטיה של המצלמה הקיימת, תוך שינוי המיקום ב-30 מעלות שמאלה.

val panBy = 30f
val camera = StreetViewPanoramaCamera.Builder()
    .zoom(streetViewPanorama.panoramaCamera.zoom)
    .tilt(streetViewPanorama.panoramaCamera.tilt)
    .bearing(streetViewPanorama.panoramaCamera.bearing - panBy)
    .build()

      

float panBy = 30;
StreetViewPanoramaCamera camera = new StreetViewPanoramaCamera.Builder()
    .zoom(streetViewPanorama.getPanoramaCamera().zoom)
    .tilt(streetViewPanorama.getPanoramaCamera().tilt)
    .bearing(streetViewPanorama.getPanoramaCamera().bearing - panBy)
    .build();

      

קטע הקוד הבא מקפיץ את המצלמה כלפי מעלה ב-30 מעלות.

var tilt = streetViewPanorama.panoramaCamera.tilt + 30
tilt = if (tilt > 90) 90f else tilt
val previous = streetViewPanorama.panoramaCamera
val camera = StreetViewPanoramaCamera.Builder(previous)
    .tilt(tilt)
    .build()

      

float tilt = streetViewPanorama.getPanoramaCamera().tilt + 30;
tilt = (tilt > 90) ? 90 : tilt;

StreetViewPanoramaCamera previous = streetViewPanorama.getPanoramaCamera();

StreetViewPanoramaCamera camera = new StreetViewPanoramaCamera.Builder(previous)
    .tilt(tilt)
    .build();

      

אנימציה של תנועות המצלמה

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

// Keeping the zoom and tilt. Animate bearing by 60 degrees in 1000 milliseconds.
val duration: Long = 1000
val camera = StreetViewPanoramaCamera.Builder()
    .zoom(streetViewPanorama.panoramaCamera.zoom)
    .tilt(streetViewPanorama.panoramaCamera.tilt)
    .bearing(streetViewPanorama.panoramaCamera.bearing - 60)
    .build()
streetViewPanorama.animateTo(camera, duration)

      

// Keeping the zoom and tilt. Animate bearing by 60 degrees in 1000 milliseconds.
long duration = 1000;
StreetViewPanoramaCamera camera =
    new StreetViewPanoramaCamera.Builder()
        .zoom(streetViewPanorama.getPanoramaCamera().zoom)
        .tilt(streetViewPanorama.getPanoramaCamera().tilt)
        .bearing(streetViewPanorama.getPanoramaCamera().bearing - 60)
        .build();
streetViewPanorama.animateTo(camera, duration);

      

בתמונה הבאה מוצגת התוצאה כשמתזמנים את האנימציה שלמעלה לפעול כל 2,000 אלפיות שנייה, באמצעות Handler.postDelayed():