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> לקובץ הפריסה של הפעילות כדי להגדיר אובייקט 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);
}

      

כדי לקבל אחיזה בחלקיק, קוראים ל-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, Subclass של המחלקה 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():