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 ב-Maps SDK ל-Android

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

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

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

כדי להתחיל:

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

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

שימוש ב-API

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

הוספת תמונת פנורמה ב-Street View

כדי להוסיף תמונת פנורמה ל-Street View כמו בדוגמה הבאה:

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

לסיכום:

  1. מוסיפים אובייקט Fragment לפעילות שיטפל בפנורמה של Street View. הדרך הקלה ביותר לעשות זאת היא להוסיף אלמנט <fragment> לקובץ הפריסה של Activity.
  2. מטמיעים את הממשק של OnStreetViewPanoramaReadyCallback ומשתמשים בשיטת הקריאה החוזרת onStreetViewPanoramaReady(StreetViewPanorama) כדי לקבל אובייקט StreetViewPanorama.
  3. צריך לבצע קריאה ל-getStreetViewPanoramaAsync() בקטע כדי לרשום את הקריאה החוזרת.

בהמשך תמצאו פרטים נוספים על כל שלב.

הוספת שבר

מוסיפים רכיב <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):

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() כדי להגדיר את הקריאה החוזרת בקטע.

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)

משתמשים ב-method onStreetViewPanoramaReady(StreetViewPanorama) כדי לאחזר מופע שאינו Null של 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 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() ליצירת מצלמה חדשה, עם ההטיה והנושא של המצלמה הקיימת והגדלת הזום ב-50 אחוזים.

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 פונה למעלה או למטה. הטווח נע בין 00- ל-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 בפנורמה