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 שאפשר לייבא לפרויקט ולהשתמש בהן כבסיס לפיתוח. במבוא מפורטות הנחיות לייבוא הדוגמאות.

ספריית התכונות של 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 ומשתמשים ב-method‏ onStreetViewPanoramaReady(StreetViewPanorama) כדי לקבל אחיזה (handle) לאובייקט 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 {
    // ...
}

      

ב-method 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);
}

      

כדי לקבל אחיזה בחלקיק, קוראים ל-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, מחלקה של Android View, מאפשרת להציב פנורמה של 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():