Street View

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

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

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

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

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

דוגמאות קוד

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

דוגמאות Java:

דוגמאות של Kotlin:

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

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

שימוש ב-API

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

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

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

הדגמה של תמונה פנורמית ב-Street View

לסיכום:

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

Java


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

Kotlin


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

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

Java


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

Kotlin


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

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

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

Java


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

Kotlin


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

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

Java


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

Kotlin


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

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

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

Java


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

Kotlin


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

מידע נוסף על StreetViewPanoramaFragment

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

StreetViewPanoramaView

StreetViewPanoramaView, מחלקה משנית של מחלקה View של Android, מאפשרת למקם פנורמה של Street View ב-Android View. השדה 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 יכולה להופיע בתוך מקומות כמו מוזיאונים, בניינים ציבוריים, בתי קפה ועסקים. שימו לב: ייתכן שלא קיימות תמונות פנורמיות חוץ במיקום שצוין.

Java


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

Kotlin


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)

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

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

Java


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

Kotlin


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

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

כדי לשנות את מרחק התצוגה באופן פרוגרמטי אפשר להגדיר את StreetViewPanoramaCamera.zoom. אם מגדירים את מרחק התצוגה ל-1.0, התמונה תגדיל את התמונה בפקטור של 2.

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

Java


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

Kotlin


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

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

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

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

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

Java


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

Kotlin


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

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

Java


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

StreetViewPanoramaCamera previous = streetViewPanorama.getPanoramaCamera();

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

Kotlin


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

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

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

Java


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

Kotlin


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

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

הדגמה של אנימציית פנורמה ב-Street View