Street View

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

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

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

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

דוגמאות קוד

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

דוגמאות של קוטלין:

• 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 של מפות Google ל-Android

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

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

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

שנתחיל?

מגדירים פרויקט

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

בדיקת הזמינות של תמונת פנורמה ב-Street View לפני הוספת תמונת פנורמה

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

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

שימוש ב-API

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

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

כדי להוסיף תמונת פנורמה של Street View, צריך לבצע את השלבים הבאים:

לסיכום:

1. מוסיפים אובייקט Fragment לפעילות שתטפל בפנורמה של Street View. הדרך הקלה ביותר לעשות זאת היא להוסיף רכיב <fragment> לקובץ הפריסה של Activity.
2. מטמיעים את הממשק OnStreetViewPanoramaReadyCallback ומשתמשים ב-method של הקריאה החוזרת 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 ולהגדיר מכונה של הקריאה החוזרת באובייקט 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() כדי להגדיר את הקריאה החוזרת במקטע.

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

      

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

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()) ל-methods המתאימות במחלקה StreetViewPanoramaView.

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

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

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

כדי להגדיר את המיקום של תמונת הפנורמה של 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():