Street View

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

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

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

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

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

דוגמאות קוד

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

דוגמאותKotlin:

דוגמאות Java:

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

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

Kotlin



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

Java


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

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

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

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

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

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

Kotlin



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

Java


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

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

Kotlin



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

Java


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

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

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

Kotlin



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

Java


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

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)

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

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

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

Kotlin



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

Java


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

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

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

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

Kotlin



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

Java


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 מעלות שמאלה.

Kotlin



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

Java


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

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

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

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

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

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

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)

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

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

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